css - HTML 电子邮件文本被剪裁

Question

我正在处理一个 HTML 电子邮件模板，我的标题中的文本在 Outlook 2007/2010/2013 中被截断了。这是相关的代码。有什么建议吗？

<tr>
<td class="main" style="padding:0px 0 21px 20px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><br />
<td class="h1" style="font:bold 28px/36px Arial, Helvetica, sans-serif; color:#000; padding:0px 0 37px;">
Glad to Meet You.
</td>
</tr>

这是结果的屏幕截图。

Answer 1

改变这个:

<td class="h1" style="font:bold 28px/36px Arial, Helvetica, sans-serif; color:#000; padding:0px 0 37px;">

为此:

<td class="h1" style="font-weight:bold; font-size: 28px; mso-height-rule: exactly; line-height: 36px; font-family: Arial, Helvetica, sans-serif; color:#000; padding:0px 0 37px;">

Outlook 2007/2010/2013 使用 MS Word 作为渲染引擎。是的，这很糟糕，需要一些额外的 mso- CSS。同样作为一般经验法则，最安全的做法是远离电子邮件中的速记字体声明；将它们分开会更好。

编辑 还有一件事是删除流氓<br />在 <tr> 之间和 <td> ;这是一个无效的地方，Outlook 可能会以一种奇怪的方式解释它。