在移动电子邮件客户端上显示时文本的行高过大答案

【问题标题】：Excessive line height on text when displaying on mobile email clients在移动电子邮件客户端上显示时文本的行高过大
【发布时间】：2017-12-13 17:51:39
【问题描述】：

我目前正在为 Outlook 桌面客户端创建一个签名设计，并且我已经设法让所有平台看起来都很好，除了在 Outlook 和 GMail 等移动客户端上的行之间存在一些过多的空白。看起来行高已设置为 150% 左右，尽管设置为 100% 以及边距和填充都设置为零。

<p style="padding:0;margin:0;line-height:100%;font-size:9pt;">One line</p>
<p style="padding:0;margin:0;line-height:100%;font-size:9pt;">Two line</p>

有人知道这个问题吗？无论如何降低行高会导致桌面客户端出现问题。

【问题讨论】：

尝试媒体查询以获取小屏幕的样式。只需更改较小宽度屏幕的 line-height 值即可。
谢谢，不幸的是，大多数电子邮件客户端仅支持内联 CSS。我之前确实给过你的建议，但不幸的是没有运气。
您是否尝试使用绝对值而不是 % 值作为行高？这应该使它保持一致。
不幸的是 px 被 Outlook 自己转换为 pt，当它到达 GMail 时，除了 % 之外的任何东西都会被剥离。

标签： html css outlook gmail

【解决方案1】：

当布局属性设置为内联和/或设置为零时，GMail 和其他移动电子邮件客户端（如 Outlook Mobile）似乎无法正确呈现。下面似乎解决了我的问题，对于那些只呈现内联样式的客户，间距无论如何都应该是这样。我确实注意到最后一段有一些额外的空白，因此最后的换行符似乎解决了这个问题。因此，所有线条看起来就像在桌面上一样紧密。希望这对某人有所帮助。

<style type="text/css">
   .sigRow { margin: 1px; font-size:9pt; font-family:"Arial",sans-serif;}
</style>
<p class="sigRow">One line</p>
<p class="sigRow">Two line</p>
<br>

【讨论】：