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

【问题标题】：Coding HTML e-mail - added image outline/border - gmail and Outlook编码 HTML 电子邮件 - 添加图像轮廓/边框 - gmail 和 Outlook
【发布时间】：2012-03-23 20:05:59
【问题描述】：

我正在编写一个简单的 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 标记内。表格单元格的单元格间距和单元格填充也设置为 0。这是问题的截图：http://cl.ly/EnFt/o

【问题讨论】：

表格单元格上的 css 是什么？这看起来像是表格 td/tr 上的某种边框 - 另外，如何将 <td rowspan="2"></td> 用于中间图像而不将其一分为二？

标签： css gmail outlook-2007 html-email outlook-2003

【解决方案1】：

图片默认为inline。您看到的那个小间隙是下降的空间，例如“g”和“q”上的那些。为了解决这个问题，您需要将所有图像显式设置为 block 元素，如下所示：

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

您可以使用premailer 之类的服务，该服务可让您将此样式添加到 HTML 文件的 head 中，并会自动为您内嵌。

值得一提的是，display:block; 显然意味着每张图片都应位于单独的td 或类似的位置：需要并排显示的图片将被向下推到彼此下方。

【讨论】：

【解决方案2】：

只需使用style="display:block;" 图像标签。它工作正常。

【讨论】：

【解决方案3】：

在您的<img> 标签中写入border:0;。像这样：

<img  style="vertical-align:top; border:0;">

【讨论】：