Question

我知道这已经被覆盖了，但解决方案对我没有帮助 - 我不是程序员，但我可以处理基本的HTML代码。我正在尝试发送一封HTML电子邮件，其中有11张图像放在一张表中，成为一张大图像 - 但是当我发送它时，行之间会出现白线。

我将表格样式设置为border="0" cellpadding="0" cellspacing="0"，但这没有帮助 - 任何人都可以给我建议吗？另外，由于我不是程序员，我可能不会理解任何复杂的答案！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) --> 
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/4/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></a></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/78/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/10/"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/116/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/42/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></a></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.metroplan.co.uk/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></a></td>
<td colspan="4"><a href="mailto:marketing@metroplan.co.uk"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Answer 1

在图像上，尝试使用

style="display:block"

它应该有用。

Answer 2

从快速检查我刚刚做了，看起来问题是由于细胞标记内的空白占据了一些地方并使细胞变大。

解决此问题的一种方法是将单元格的字体大小设置为0，从而消除额外的空间。

Live test case with the fix applied

在您的情况下，请尝试将此添加到您发送的HTML中：

<style type="text/css">
    table td { font-size: 0px; }
</style>

假设您只有一个表，并且所有单元格只有图像，如果您有更多表格，那么请提供特定表格id，例如<table id="MyImagesTable">然后更改为：

#MyImagesTable td { font-size: 0px; }

如果收到电子邮件的人的电子邮件客户端不支持样式表，则必须为每个单元格手动设置它：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
    </tr>
    <!-- ...more rows... -->
</table>

Answer 3

我也面临同样的问题。

但我试过

<img src ="images/xyz.jpg"  style="display:block">

并解决了

Answer 4

此问题在许多邮件客户端上很常见，只需使用：

<img style="display:block" />

在HTML中的每个图片上。

Answer 5

如果没有真正看过您的代码，我猜您会在图片之间看到空格，因为您的图片之间有实际空间。

如果你有类似的东西......

<img src="image1.jpg">
<img src="image2.jpg">

将其更改为...（注意两个图像标签之间没有空格）

<img src="image1.jpg"><img src="image2.jpg">

如果要将图像放在单个单元格中（即每个单元格一个图像），请尝试将border-collapse:collapse的CSS ...

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">

<强>更新

正如@Shadow指出的那样，上述任何部分都不会产生任何影响。

看起来FireFox和Chrome会处理图像（因为某些原因），因此他对table td { font-size:0px; }的建议是恕我直言的正确答案。（IE似乎不受此问题的影响。）

Answer 6

某些邮件客户端忽略了很多这种情况。这总是你在沉重的图形HTML电子邮件中冒的风险。您几乎可以保证收件人看错了。我总是鼓励我的客户不要求这些电子邮件设计是6-12个图像分组在一个表格中。但是，总会有那些坚持要完成的，即使在我向多个邮件客户端显示结果之后，他们仍然要求完成。

如果可以，请避免使用它。不幸的是，确实无法保证。

如果您要将电子邮件发送给同一邮件客户端中的一组收件人，您可以使用上述代码之一解决该问题，以找到您的邮件客户端响应最佳的邮件。

Answer 7

很多时候可能是用户错误。当你在photoshop中切片时，确保所有的切片都在接触。如果有一个1px的差距，那么这将搞砸一切!!!

另外，这是我学到的一招！

将所有图像设置为边框=＆＃34; 0＆＃34;在alt =＆＃34;＆＃34; ...

之后标记

如果有的话 ** **标签，我的意思是不是

所以举例......

尝试，并确保所有图像都有border =＆＃34; 0＆＃34;并且所有标签都有一个设定的宽度，所有切片都在触摸，你应该有0个间隙。

删除表中图像之间的白色间距

7 个答案: