Question

HTML签名在Chrome / Firefox / Safari中的Hotmail中显示不正确，但在所有这些浏览器以及我目前使用过的所有其他客户端中都能正常工作。用于圆角的图像似乎在其表格单元格中添加了一些额外的高度。

有一个非常常见的报告显示一个非常类似的问题，建议对所有图像使用display：block，但这似乎没有解决问题。这是我的代码：

<table id="ecxofferbox" height="90" width="525" border="0" cellspacing="0" cellpadding="0" bgcolor="#005bab" style="font-family:Verdana, Tahoma, Helvetica, sans-serif;color:#fff">
<tbody><tr valign="top">
<td width="229" height="90" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td valign="top"><img src="http://estel.uwcs.co.uk/emailtest/circle1.png" height="6" alt=""></td>
<td></td>
</tr>
<tr valign="top">
<td width="6"></td>
<td style="padding-left:5px" width="223" height="78">
<table cellpadding="0" cellspacing="0" height="78" width="223">
<tbody><tr valign="top"><td><font color="white" size="4" face="Verdana, Tahoma, Helvetica, sans-serif"><b>Amazing offer here only £99.99</b></font></td></tr>
<tr><td></td></tr>
<tr valign="bottom"><td><a href="http://example.com" style="text-decoration:none" name="Please click here for further details" target="_blank"><font color="#ffc505" size="2" face="Verdana, Tahoma, Helvetica, sans-serif"><b>Click here for more details</b></font></a></td></tr>
</tbody></table>
</td>
</tr>
<tr height="6" valign="bottom">
<td height="6" valign="bottom"><img src="http://estel.uwcs.co.uk/emailtest/circle4.png" alt=""></td>
<td></td>
</tr>
</tbody></table>
</td>
<td width="175" height="90"><img src="http://estel.uwcs.co.uk/emailtest/example.jpg" height="90" width="175" alt=""></td>
<td width="121" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td></td>
<td width="6" height="6" valign="top"><img src="http://estel.uwcs.co.uk/emailtest/circle2.png" height="6" alt=""></td>
</tr><tr valign="middle">
<td align="center" width="115" height="78"><img src="" alt="" height="71" width="71"></td>
<td height="78" width="6"></td>
</tr>
<tr valign="bottom">
<td></td>
<td valign="bottom" height="6"><img src="http://estel.uwcs.co.uk/emailtest/circle3.png" alt=""></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

显示correctly in IE (here in IE8)但incorrectly everywhere else I've looked (here Chrome 9 beta)

人们的任何想法都会有用。尝试的其他方法包括从电子邮件中删除所有空格，并且特别关注每个td的高度和宽度而不是假设计算;但这些方法都没有奏效。

Answer 1

你需要包含style =“display：block;”在你的所有图像上。

Answer 2

您是否尝试过设置背景颜色？

例如。 bgcolor="#FFF"

Answer 3

如果显示：阻止;没有做的伎俩，也在所有图像的内联样式中设置margin:0;。我见过Gmail＆amp; Hotmail在我明确将所有边距设置为0后，在图像上添加了额外的垂直空间。

Windows Live Hotmail中的电子邮件表呈现

3 个答案: