html - 当我在 Outlook 中查看时，表格边框不直

Question

我尝试用 HTML 制作一个简单的电子邮件模板。它在 Firefox 和 IE 中看起来不错，但在 Outlook 2016 中左边框线不直。

我已将 border-collapse: collapse; 添加到我的表格中，否则 Outlook 中整个左边的行都将丢失。

JSFiddle:https://jsfiddle.net/0xkqxxdh/

提前致谢。

Answer 1

尝试将 font-size: 0px; 添加到任何未填充文本的元素。

例子:

<td align="center" bgcolor="#FFFFFF" style="padding: 20px 0 20px 0; border-bottom: 1px solid #cccccc;font-size: 0px;"><img alt="Logo" src="images/logo.png" style="display: block;font-size: 0px;"></td>

添加 margin: 0px; 和 padding: 0px; 也有助于更紧凑的电子邮件布局。

此外，您可能想尝试书中最古老的电子邮件技巧 - 用带边框的表格包围整个布局，并去掉其中的带边框元素。然后为每个附加部分使用 border-top。

我的猜测是，除了 font-size/margin/padding 调整之外，还需要确保它们不会应用于电子邮件的无文本部分(听起来“smexy”)，2px 边框迫使额外的像素进入宽度。

电子邮件不友好。希望它们在 Lotus Notes 7 中得到验证的客户更糟糕。如果您还没有尝试过 Litmus，请在有时间深入研究跨客户端兼容性的细节时进行免费试用。这就像在迈阿密海滩遇到一个戴着大礼帽和单片眼镜的人。