Office 365/Outlook转发邮件时表格间出现多余段落与间隙问题

问题现象 #

通过网页端或Thunderbird发送邮件时显示正常，但使用Outlook转发邮件时，p.MsoNormal元素会导致多余间隙，排版完全混乱。

问题预览：

现有代码 #

邮件签名HTML头部代码 #

<HTML lang="en">
    <HEAD>
        <TITLE>Email Signature</TITLE>
    
        <meta http-equiv=Content-Type content="text/html; charset=windows-1250">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
          body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
          table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
          img { -ms-interpolation-mode: bicubic; }

          table, tr, td {
            border-collapse: collapse!important;
             }

            tr {
                font-size:0px!important;
                line-height:0px!important;
            }
            td p.MsoNormal {
                margin: 0.1px!important;
                margin-top: 0.1px!important;
                margin-bottom: 0.1px!important;
            }

            p{
                margin-top: 0px!important;
                margin-bottom: 0px!important;
              }
          /* RESET STYLES */
          img { border: 0; outline: none; text-decoration: none; }
          table { border-collapse: collapse !important; }
          /* body { margin: 0 !important; padding: 0 !important; width: 100% !important; } */
          
          /* iOS BLUE LINKS */
          a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
          }    
    </HEAD>

邮件正文示例代码 #

<body>

                <table width="375" role="presentation" cellpadding="0" cellspacing="0" border="0" class="container" style="background-color:#e1e1e1;border-spacing: 0 !important; border-collapse: collapse !important;">
                 <tr>
                   <td width="56" class="mobile" align="left" valign="top" style="vertical-align: middle;">
                    <p class="MsoNormal" style=" PADDING: 0px!important; MARGIN-TOP: 0px!important; MARGIN-BOTTOM: 0px!important;">
                        <a href="/" target="_blank" >
                            <img border="0" width="56" height="auto" src="here should be image"  style="width: 56px;  height: auto; display: block;">
                        </a>
                    </p>
                   </td>
                   <td width="295" class="mobile" align="left" valign="top" style="vertical-align: middle; font-size:14px; mso-line-height-rule: exactly; line-height: 75%;">
                    <p class="MsoNormal" style=" PADDING: 0px!important; MARGIN-TOP: 0px!important; MARGIN-BOTTOM: 0px!important;">
                        <strong><span style="FONT-SIZE: 16px; mso-line-height-rule: exactly; line-height: 16px; FONT-FAMILY: Arial; color:#000000; ">random text</span></strong>
                        <br><span style="FONT-SIZE: 11px; mso-line-height-rule: exactly; line-height: 11px; FONT-FAMILY: Arial; color:#000000;">another text</span>    
                    </p>
                   </td>
                 </tr>
                
               </table>
               <table width="375" role="presentation" cellpadding="0" cellspacing="0" border="0" class="container" style="background-color:#e1e1e1;border-spacing: 0 !important; border-collapse: collapse !important;">
                <tr>
                  <td width="56" class="mobile" align="left" valign="top">
                    <p class="MsoNormal" style=" PADDING: 0px!important; MARGIN-TOP: 0px!important; MARGIN-BOTTOM: 0px!important;">
                    </p>
                  </td>
                  <td align="left" width="295" valign="top" style="font-size:14px; mso-line-height-rule: exactly; line-height: 75%;">
                    <p class="MsoNormal" style=" PADDING: 0px!important; MARGIN-TOP: 0px!important; MARGIN-BOTTOM: 0px!important;">  <span style="FONT-SIZE: 11px; mso-line-height-rule: exactly; line-height: 11px; FONT-FAMILY: Arial;color:#000000;"><strong>m: </strong><font color="black">+48 333 333 333</font></span><br>
                        <span class="show" style="FONT-SIZE: 11px; mso-line-height-rule: exactly; line-height: 11px; FONT-FAMILY: Arial; color:#000000;"><strong>e: </strong><font color="black">my@email.com</font></span>
                    </p>
                  </td>
                </tr>
              </table>

</body>

已尝试的无效操作 #

• 移除所有margin设置
• 为td添加display: block
• 设置vertical-align: middle

解决方案 #

1. 强制覆盖p.MsoNormal的Outlook专属样式 #

Outlook用Word引擎渲染，普通CSS优先级不够，要补充mso专属属性强化重置：

p.MsoNormal, td > p.MsoNormal {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    mso-margin-top-alt: 0 !important;
    mso-margin-bottom-alt: 0 !important;
    mso-padding-alt: 0 !important;
}

2. 删除空的p.MsoNormal标签 #

第二个表格第一个td里的空p.MsoNormal标签是间隙元凶之一，直接删掉，改成：

<td width="56" class="mobile" align="left" valign="top">
</td>

3. 补充表格和td的mso间距重置 #

在样式里加以下代码，彻底禁用Outlook的默认表格间距：

td {
    mso-line-height-rule: exactly;
    line-height: 0 !important;
}
table {
    mso-table-space: 0 !important;
    mso-table-cell-space: 0 !important;
}

4. 替换<p>标签为<div>（备选方案） #

如果上面的方法还不行，就把所有p.MsoNormal换成<div>，Outlook对<div>的默认样式干预更少，然后给<div>加重置样式：

div {
    margin: 0 !important;
    padding: 0 !important;
}

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