HTML 电子邮件中的文本未在 OL Office 365 for Windows 中呈现？

Question

当我在 Litmus 中测试这个 2 列布局时，除了 Outlook for Windows 之外，一切看起来都很好。这显然是 OL Office 365 (Windows 10)。我尝试为段落添加高度和背景颜色，但我没有看到任何区别。您可以看到文本所在的小规格，但令我困惑的是为什么它不会完全显示。

下面是我的带有 MSO 条件语句的代码：

    <!-- ////////////// 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&reg; 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 ////////////// -->
            
        

Answer 1

无论您设置什么，某些浏览器/应用程序都会默认强制使用最小字体大小。因此，较大的字体大小与您设置的 8px 行高相结合可能会导致您在图像中发布的结果（即较大的字母被较小的行高截断）。尝试将 line-height 更改为 1em，即与 font-size 相同的高度。