14

我知道这之前已经介绍过，但解决方案对我没有帮助——我不是程序员，但我可以处理基本的 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>
4

7 回答 7

24

在图像上，尝试使用

style="display:block"

它应该工作。

于 2012-06-20T10:58:55.657 回答
6

From quick check I just did, looks like the problem is due to blank space inside the cells markup taking up some place and making the cells bigger.

One way around this is setting the font size of the cells to 0 thus eliminating that extra space.

Live test case with the fix applied.

In your case, try adding this to the HTML you send:

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

This is assuming you have only one table and all cells have only images, if you have more tables then give that specific table id e.g. <table id="MyImagesTable"> then change to:

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

If the email client of those getting the email does not support style sheets you will have to manually set it for each cell:

<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>
于 2012-06-20T11:03:07.777 回答
3

我也面临同样的问题。

但我试过了

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

并解决了

于 2014-09-19T08:14:51.733 回答
1

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

<img style="display:block" />

在您的 HTML 中的每个图像上。

于 2013-01-10T22:40:44.913 回答
0

在没有实际看到您的代码的情况下，我猜您会看到图像之间的空格，因为您的图像之间有实际的空间。

如果你有这样的...

<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 似乎不受该问题的影响。）

于 2012-06-20T11:00:32.753 回答
0

某些邮件客户端完全忽略了其中的很多内容。这始终是您在大量图形 html 电子邮件中承担的风险。几乎可以保证您的收件人看错了。我总是鼓励我的客户不要要求这种将 6 到 12 张图像组合在一个表格中的电子邮件设计。但是，总会有人坚持要完成，即使我在多个邮件客户端中向他们展示了结果，他们仍然要求完成。

如果可以的话，避免它。不幸的是，确实没有保证的解决方法。

如果您要将电子邮件发送给一组都在同一个邮件客户端中的收件人，您可能可以使用上述代码之一来解决它，以找到您的邮件客户端响应最好的那个。

于 2016-07-04T15:19:06.940 回答
-1

很多时候可能是用户错误。当您在 Photoshop 中切片时，请确保所有切片都可以触摸。如果有 1px 的差距，那一切都会搞砸的！！！

另外，这是我学到的一个技巧......

将所有图像设置为在 alt=""... 之后有一个border="0" 标签

如果有任何** **标签，我的意思是只有，不是

所以例如....

试试看，并确保所有图像的边框 =“0”，所有标签都有一个固定的宽度，所有的切片都是接触的，你应该有 0 个间隙。

于 2014-10-02T20:14:14.173 回答