在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>

添加保证金：0px; 和填充：0px; 也可以帮助解决更严格的电子邮件布局问题。

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

我的猜测是，除了 font-size / margin / padding 调整以确保它们不是应用于电子邮件的无文本部分（声音＆＃34; smexy＆＃34;），2px边框强制额外的像素进入宽度。

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