HTML 电子邮件，特定于 Outlook 2007 - 如何修复 'Spacing between text in same <strong> tag'

Question

在 litmus 中测试电子邮件模板，无法弄清楚为什么 Outlook 2007 为嵌套在 <strong> 中的文本添加了很大的空间。 , <a> , <td> , <tr>标签。请注意，该按钮适用于所有其他客户端。

尝试添加各种内联 CSS，如 line-height、mso-line-height: exactly;

<!--CTA-->
    <tr>
        <td align="center">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="center" bgcolor="#009cb3" width="200" height="60" style="-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;">
                        <a class="bg-rollover" href="" target="_blank" style="font-size:14px;font-family:Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;padding:28px 12px;display:inline-block;width:200px;border:1px solid #009cb3;-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;">
                        <strong style="text-transform:uppercase;">button text</strong>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
<!--End of CTA-->

我希望输出的两行文本之间有一个小间隙。

Answer 1

决定使用 VML 使按钮在 Outlook 中工作。对于那些感兴趣的人，代码在下面，但请注意，您必须更改 VML 和 HTML 中的 href 和按钮文本。

<!--CTA-->
   <tr>
      <td align="center">
         <div>
         <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:60px;v-text-anchor:middle;width:200px;" arcsize="5%" strokecolor="#ffbb00" fillcolor="#ffbb00">
               <w:anchorlock/>
               <center style="color:#041857;font-family:Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;">CTA text</center>
            </v:roundrect>
         <![endif]-->
            <a href="#" style="background-color:#ffbb00;border:1px solid #ffbb00;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;color:#041857;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:20px;line-height:24px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;font-weight:bold; padding: 12px 18px;">CTA text</a>
         </div>
      </td>
   </tr>
<!--End of CTA-->

尽管 VML 已被 SVG 取代，但旧版本的 Outlook 使用 Microsoft Word 来呈现电子邮件。 Word 可识别 VML，因此如果内容未按预期在 Outlook 中呈现，则使用它很有用。