我尝试用 HTML 制作一个简单的电子邮件模板。它在 Firefox 和 IE 中看起来不错,但在 Outlook 2016 中左边框线不直。
我已将 border-collapse: collapse;
添加到我的表格中,否则 Outlook 中整个左边的行都将丢失。
JSFiddle:https://jsfiddle.net/0xkqxxdh/
提前致谢。
最佳答案
尝试将 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,请在有时间深入研究跨客户端兼容性的细节时进行免费试用。这就像在迈阿密海滩遇到一个戴着大礼帽和单片眼镜的人。
关于html - 当我在 Outlook 中查看时,表格边框不直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38928314/