0

我正在编写一个简单的 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

4

3 回答 3

2

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

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

您可以使用premailer 之类的服务，它可以让您在 HTML 文件中添加此样式head，并自动为您内联放置。

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

于 2012-03-06T10:57:20.547 回答
1

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

于 2012-03-06T12:12:54.877 回答
0

写border:0;在你的<img>标签上。像这样：

<img  style="vertical-align:top; border:0;">
于 2012-03-06T10:52:31.513 回答