Windows版Outlook邮件模板p标签上下padding失效问题咨询

问题原因 #

Windows 版本 Outlook 从2007版本开始改用 Word 内核渲染邮件内容，对<p>、<div>这类常规HTML块级标签的垂直方向margin、padding支持存在已知兼容bug，写在这类标签上的上下内/外边距会被Word渲染内核直接丢弃，属于客户端本身的渲染限制，不是代码语法错误。

幽灵表（Ghost Table）正确用法 #

你之前使用的幽灵表条件判断存在语法错误，正确的幽灵表是仅Outlook/IE可识别的条件注释块，需要完整包裹需要做兼容兜底的内容区块：注释起始标签放在内容最外层之前，注释闭合标签放在内容最外层之后，其他标准邮件客户端会自动忽略注释内的表格代码，不会影响正常渲染。
正确的幽灵表基础结构如下：

<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-spacing:0;">
  <tr>
    <td valign="top" style="padding:0;">
<![endif]-->
<!-- 需兼容的邮件内容放在此处 -->
<!--[if (gte mso 9)|(IE)]>
    </td>
  </tr>
</table>
<![endif]-->

修复后可直接使用的代码 #

不要在<p>标签上定义任何垂直方向的内外边距，所有垂直间距改用空<td>设置固定高度实现，搭配幽灵表做布局兜底即可：

<tr>
    <td style="padding: 0;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing: 0;" role="presentation">
            <tr>
                <td height="8" style="background-color: #21c6b8; font-size:0; line-height:0;">&nbsp;</td>
            </tr>
            <!-- 幽灵表兜底开始 -->
            <!--[if (gte mso 9)|(IE)]>
            <tr>
              <td>
                <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
                  <tr>
            <![endif]-->
            <!-- 标题上10px间距 -->
            <tr>
                <td height="10" style="font-size:0; line-height:0;">&nbsp;</td>
            </tr>
            <tr>
                <td style="padding: 0 20px; text-align: center;">
                    <!-- p标签重置默认边距，移除垂直padding -->
                    <p style="margin:0; font-size: 16px; font-weight: bold; mso-padding-alt:0;">Title / Teitl</p>
                </td>
            </tr>
            <!-- 标题下5px间距 -->
            <tr>
                <td height="5" style="font-size:0; line-height:0;">&nbsp;</td>
            </tr>
            <!-- REPEAT BLOCK STARTS-->
            <tr>
               <td style="padding: 0 20px; text-align: center;">
                   <p style="margin:0; font-size: 14px; mso-padding-alt:0;"><i>[[title]]</i></p>
               </td>
           </tr>
           <!-- 重复项间距 可按需调整高度 -->
           <tr>
                <td height="8" style="font-size:0; line-height:0;">&nbsp;</td>
           </tr>
           <!-- REPEAT BLOCK ENDS -->
           <tr>
               <td height="20" style="font-size:0; line-height:0;">&nbsp;</td>
           </tr>
            <!--[if (gte mso 9)|(IE)]>
                  </tr>
                </table>
              </td>
            </tr>
            <![endif]-->
            <!-- 幽灵表兜底结束 -->
            <tr>
                <td height="8" style="background-color: #21c6b8; font-size:0; line-height:0;">&nbsp;</td>
            </tr>
        </table>
    </td>
</tr>

关键兼容注意点 #

• 所有用于控制间距的空<td>需要添加font-size:0; line-height:0;样式，内部填充 ，避免Outlook自动折叠空单元格导致高度失效
• 给<p>标签添加mso-padding-alt:0;样式，重置Outlook给段落默认追加的内置边距
• 带背景色的分隔条单元格同样需要加font-size:0;line-height:0;样式，避免Outlook默认行高把单元格撑得比设定高度高
• 原幽灵表条件判断(gte mso 9|(IE))存在语法错误，正确写法为(gte mso 9)|(IE)

修复后Windows版Outlook对应渲染效果：

内容的提问来源于stack exchange，提问作者user1574598