HTML 电子邮件文本被剪裁答案

【问题标题】：HTML email text getting clippedHTML 电子邮件文本被剪裁
【发布时间】：2016-06-01 01:21:11
【问题描述】：

我正在编写一个 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>

这是结果的屏幕截图。

【问题讨论】：

标签： css html-email

【解决方案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。同样作为一般经验法则，远离电子邮件中的速记字体声明是最安全的；将它们分开会更好。

EDIT另外一件事是删除<tr>和<td>之间的流氓<br />；这是一个无效的放置位置，Outlook 可能会以一种奇怪的方式解释它。

【讨论】：

谢谢，泰德。我进行了您建议的更改，当我通过 Litmus 进行测试时，它仍保留在 Outlook 2007/2010/2013 中。我的开发人员在本机 Outlook 版本中对其进行了测试，并说它可以正确呈现。
也许错误不在您上面粘贴的 sn-p 中，我认为代码没有理由在任何电子邮件客户端中生成剪切文本。你有CSS Resets吗？我还在上面编辑了我的答案以删除多余的<br />。