css - 编码 HTML 电子邮件 - 添加图像轮廓/边框 - gmail 和 Outlook

Question

我正在编写一个简单的 HTML 电子邮件，我在 gmail 和 Outlook 2003 和 2007 中遇到了奇怪的行为。所有图像下方都有一个空白区域。我的图像内联样式如下所示:

border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;

所有样式均取自 MailChimp HTML 代码，应避免不一致。你有这方面的经验吗？图像在表 td 标记内。表格单元格的 cellspacing 和 cellpadding 也设置为 0。这是问题的屏幕截图:http://cl.ly/EnFt/o

Answer 1

默认情况下，图像是内联。您看到的那个小间隙是下行部分的空间，例如“g”和“q”上的下行部分。为了解决这个问题，您需要将所有图像显式设置为 block 元素，如下所示:

<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />

您可以使用类似 premailer 的服务，它允许您将此样式添加到 HTML 文件的 head 中，并会自动为您将其内联。

值得一提的是，display:block; 显然意味着每个图像都应该在单独的 td 或类似的:需要并排显示的图像-side 将被向下推到彼此下方。