Windows端Office 365 Outlook中HTML邮件文本无法渲染问题咨询

我用Litmus测试了一套60/40双栏布局的HTML邮件，除Windows 10系统下的Office 365 Outlook外，其余所有环境显示均正常。目前在该Outlook版本中只能看到文本的微小痕迹，尝试给段落添加高度和背景色也没有任何改善，无法定位无法完整显示的原因。

附上相关代码：

<!-- ////////////// START TWO COL 60/40 ////////////// -->  
<div class="two-col c-6040" style="text-align:left;font-size:0;background-color:#F2F2F2">
    <!--[if mso]> 
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"> 
<tr> 
<td style="width:60%;padding:10px;" valign="top"> 
<![endif]-->
    <div class="column-lrg" style="width:100%;max-width:310px;display:inline-block;vertical-align: top; padding: 20px">
      <p style="margin:0;text-align: left;">
<h3 style="font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 24px; line-height: 30px; color:#141957;text-align: left; ">We  make it easy to <br>
sponsor a retirement plan.</h3>
             <!-- START vspacer -->
<div class="vspacer8" style="font-size:8px;line-height: 8px;clear:both;" aria-hidden="true">&nbsp;</div>
<!-- END vspacer -->
                   <p style="color: #141957; font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; text-align: left;">With SMARTSync® technology your plan is directly integrated with our app. This greatly reduces manual data entry, keep sensitive information safe and enables time-saving automation.</p>
             <!-- START vspacer -->
<div class="vspacer8" style="font-size:8px;line-height: 8px;clear:both;" aria-hidden="true">&nbsp;</div>
<!-- END vspacer -->
<a class="link-blue" style="text-decoration: underline; color: #26328C;font-weight: 600;font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; text-align: left;" href="https://placehold.co/300/0041dc/FFFFFF/png"><span class="link-blue-inner" style="color: #26328C; text-decoration: underline;font-weight: 600; text-align: left;">Download here.
</span></a>

        </p>
    </div>
    <!--[if mso]> 
</td> 
<td style="width:40%;padding:10px;" valign="top"> 
<![endif]-->
    <div class="column-sm" style="width:100%;max-width:250px; height: 100%; display:inline-block;vertical-align: center; text-align: center;">
            <div style="padding:10px;display: inline-block;">
            <div style="padding-top: 40px;">
                <!-- width="170" must take into account padding for Outlook to scale proper // style does not matter  -->
                <img src="https://placehold.co/100/0041dc/FFFFFF/png" />
                </div>
        </div>
        
    </div>
    <!--[if mso]> 
</td> 
</tr> 
</table> 
<![endif]-->
</div>  
<!-- ////////////// END TWO COL 60/40 ////////////// -->

显示异常效果：

问题原因及修复方案 #

核心问题分析

• 非法嵌套块级元素：<p>标签内嵌套了<h3>和另一个<p>标签，违反HTML规范。Outlook基于Word渲染引擎，对这类错误结构容错性极低，直接导致内容被压缩隐藏。
• padding冲突：MSO条件块内的<td>设置padding:10px，外层<div>又设padding:20px，双重padding挤压布局空间。
• font-size继承问题：父容器font-size:0未被Outlook正确解析，导致文本尺寸异常缩小。

修复后的代码

<!-- ////////////// START TWO COL 60/40 ////////////// -->  
<div class="two-col c-6040" style="text-align:left;font-size:0;background-color:#F2F2F2">
    <!--[if mso]> 
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0"> 
        <tr> 
            <td style="width:60%;padding:20px;" valign="top"> 
    <![endif]-->
    <div class="column-lrg" style="width:100%;max-width:310px;display:inline-block;vertical-align: top; padding: 20px;">
        <h3 style="margin:0;font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 24px; line-height: 30px; color:#141957;text-align: left;">We make it easy to <br>sponsor a retirement plan.</h3>
        
        <!-- START vspacer -->
        <div class="vspacer8" style="font-size:8px;line-height: 8px;clear:both;" aria-hidden="true">&nbsp;</div>
        <!-- END vspacer -->
        
        <p style="margin:0;color: #141957; font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; text-align: left;">With SMARTSync® technology your plan is directly integrated with our app. This greatly reduces manual data entry, keep sensitive information safe and enables time-saving automation.</p>
        
        <!-- START vspacer -->
        <div class="vspacer8" style="font-size:8px;line-height: 8px;clear:both;" aria-hidden="true">&nbsp;</div>
        <!-- END vspacer -->
        
        <a class="link-blue" style="text-decoration: underline; color: #26328C;font-weight: 600;font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; text-align: left;" href="https://placehold.co/300/0041dc/FFFFFF/png">
            <span class="link-blue-inner" style="color: #26328C; text-decoration: underline;font-weight: 600; text-align: left;">Download here.</span>
        </a>
    </div>
    <!--[if mso]> 
            </td> 
            <td style="width:40%;padding:20px;" valign="top"> 
    <![endif]-->
    <div class="column-sm" style="width:100%;max-width:250px;display:inline-block;vertical-align: top; text-align: center;">
        <div style="padding:10px;display: inline-block;">
            <div style="padding-top: 40px;">
                <img src="https://placehold.co/100/0041dc/FFFFFF/png" style="display:block;" />
            </div>
        </div>
    </div>
    <!--[if mso]> 
            </td> 
        </tr> 
    </table> 
    <![endif]-->
</div>  
<!-- ////////////// END TWO COL 60/40 ////////////// -->

关键修改点

1. 移除<p>对<h3>和内部<p>的嵌套，确保HTML结构合法。
2. 统一MSO条件块内<td>的padding为20px，与外层div保持一致，避免布局冲突。
3. 给<img>添加display:block;，消除Outlook默认的图片下方空白。
4. 移除height:100%;和vertical-align:center;，改用vertical-align:top配合padding-top调整元素位置（Outlook对vertical-align:center支持不佳）。

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