Outlook Web App 中 HTML 电子邮件的样式行高

Question

我一直在处理 HTML 电子邮件，并已尽一切努力让 line-height 在 Microsoft Outlook Web App 中正确显示。我已经在我的内联样式上尝试了!important，在文档头中使用.ExternalClass * {line-height: 100%}，将文本包装在具有inline line-height 样式的跨度中，在父td 上使用line-height，还有span。

如果有人能帮忙，不胜感激！

下面是我当前文本在 td 中的一个区域的示例。

<td pardot-region="articleContent1a" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: sans-serif; font-size: 14px; line-height: 25px; text-align: left; color: #7f7f7f;" valign="top">
  Yesterday, Krissy posted about six things you should consider when performing a high-level user experience (UX) audit of a website. While UX is a crucial component of measuring a website’s success, it’s only part of the equation.</td>

我也尝试添加到 td mso-line-height-rule: 完全正确。

Answer 1

我知道这是一个过去的问题，但我没有看到一个公认的答案。你有 jsfiddle 链接来查看你的代码吗？

您确实说过您将嵌入的 CSS 覆盖设置为 100%；尝试将其设置为 112%：

.ExternalClass * { line-height:112%; }

Outlook Webmail 不会有您想要的确切行高，但它会覆盖 Webmail 添加的行高。

其他可能性：

• 应在表格单元格<td> 中指定行高，而不是任何内联标签（如<span>）。

• 您使用mso-line-height-rule:exactly 的顺序很重要 - 行高应在 mso-line-height-rule 之后立即声明：

  <td style="font-size:1em;mso-line-height-rule:exactly;line-height:1.3em;">

• 最后一个选项，将每行文本放在自己的表格行/表格单元格中，并通过表格单元格在每行中使用填充来控制行高。

祝你好运。

Answer 2

将行高（body、td 和 spans）增加三倍。确保在包含文本的每个 td 或 span 中为您的字体添加样式。尽管指南告诉你什么，根据我的专业经验，你可以更好地使用“span”而不是“p”。

对 Outlook 使用条件样式：

table {
font-size:1px;
mso-line-height-alt:0;
line-height:0;
mso-margin-top-alt:1px;
}

偏离路线；您的电子邮件应该使用表格来设计......但这是常见的做法。

Answer 3

根据this CSS support for email guide，line-height 在 Outlook.com 的表格单元格中被忽略 - 他们建议在 p 上尝试。