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

【问题标题】：Email table rendering in Windows Live HotmailWindows Live Hotmail 中的电子邮件表格呈现
【发布时间】：2011-06-27 02:04:35
【问题描述】：

一个 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 的高度和宽度，而不是假设计算；但这些方法都没有奏效。

【问题讨论】：

我很久没有玩 Hotmail（自从 Gmail 出现之前）——Hotmail 是否以标准模式呈现？...电子邮件是在主窗口内呈现还是沙盒化进入 iframe？（如果是这样，那是在标准模式下吗？

标签： html email internet-explorer html-table html-email

【解决方案1】：

您需要包含 style="display:block;"在您的所有图像上。

【讨论】：

我的意思不是听起来粗鲁，因为您很友善地回答了问题 - 但您是否阅读过这个问题？
对不起，我应该澄清一下。当您之前执行此操作时，您确定它是内联的吗？

【解决方案2】：

你试过设置背景颜色吗？

例如。 bgcolor="#FFF"

【讨论】：

【解决方案3】：

如果显示：块；没用，还设置margin:0; 为所有图像的内联样式。我已经看到 Gmail 和 Hotmail 在我将所有边距显式设置为 0 后消失的图像上添加了额外的垂直空间。

【讨论】：