Question

我一直在处理HTML电子邮件，并尝试了一切让line-height在Microsoft Outlook Web App中正常显示。我在内联样式上尝试了!important，在文档头中使用.ExternalClass * {line-height: 100%}，在inline line-height样式的范围内包装文本，在父line-height上td 1}}以及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，Outlook.com的表格单元格会忽略line-height - 他们建议您在p上尝试使用{{1}}。

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

3 个答案: