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

默认情况下，图片为inline。你看到的这个小差距是下行空间，例如'g'和'q'上的空间。要解决此问题，您需要将所有图像显式设置为block元素，如下所示：

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

您可以使用premailer之类的服务，这样您就可以在HTML文件的head中添加此样式，并自动将其内嵌到您的身上。

值得一提的是，display:block;显然意味着每张图片应该是单独的td或类似的：需要并排显示的图片会被推到彼此之下

Answer 2

只需使用style="display:block;"图片标记即可。它可以正常使用。

Answer 3

在border:0;标记中写下<img>。像这样：

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

编码HTML电子邮件 - 添加图像大纲/边框 - gmail和Outlook

3 个答案: