HTML 电子邮件 - Firefox 和 PC 上的 hotmail 中的单元格中的额外填充答案

【问题标题】：HTML email - extra padding in cell in Firefox & hotmail on PCHTML 电子邮件 - Firefox 和 PC 上的 hotmail 中的单元格中的额外填充
【发布时间】：2011-09-02 12:22:12
【问题描述】：

我正在尝试设置 HTML 电子邮件的样式，显然是使用表格和内联样式。我正在使用 litmus .com 进行测试

除了 2 个客户端 - Hotmail 和 Firefox 上的 Gmail 之外，我获得了相当不错的一致结果。

我在单元格中嵌入了一个表格，这是嵌入表格的 html -

<table border="0" align="center" cellpadding="0" cellspacing="0" style="padding:0px;">  
<tr>
<td colspan="3" valign="bottom" style="font-size:0px; padding:0px; margin:0px; vertical-align:bottom;overflow:hidden; "><img src="/images/promo-border-top.jpg" width="221" height="4"></td>

<td rowspan="4" style="padding-left:20px; ">
<a href=""><img name="template_r8_c2" src="/images/shop-now-eng.png" width="118" height="32" border="0" id="template_r8_c2" alt="shop now" /></a>
</td>
</tr>
<tr>
<td align="left" height="24" style="padding:0px; margin:0px;  height:24px; background-image:url(/images/promo-border-left.jpg);background-repeat:repeat-y; background-position:left; overflow:hidden;" ><img src="/images/promo-border-left.jpg" width="4" height="24"></td>
 <td align="center" valign="middle" height="20" style="padding:0px; height:20px; overflow:hidden; line-height:10px; font-family: arial, helvetica; color: #333333;  font-size:12px margin-bottom:1px;">xxx-xxx-xxx-xxx</td>
 <td align="right" height="24" style="padding:0px; margin:0px;  height:24px; background-image:url(/images/promo-border-right.jpg); background-repeat:repeat-y; background-position:right;"><img src="/images/promo-border-right.jpg" width="4" height="24"></td>
 <tr>
 <td colspan="3" valign="top" style="padding:0px; font-size:0px; margin:0px; height:4px; background-color:yellow;overflow:hidden;"><img src="images/promo-border-bottom.jpg" width="221" height="4"></td>        
  </table>

我在下面放了两张图片来说明它的渲染方式 - 忽略黄色部分，它是为测试而添加的。

【问题讨论】：

抱歉，它正在渲染表格而不是显示代码。现已修复。

标签： html css html-table html-email

【解决方案1】：

尝试将display:block 添加到您的图像中。 GMail likes to add a little margin to images 显示为inline，默认值。

编辑：根据下面的评论：看起来td 的 rowspan 为 4，table 中只有 3 行可能。如果你把那个 4 改成 3 呢？

【讨论】：

看看我的编辑。可能是由于您尝试跨越的额外行不存在。

【解决方案2】：

在表格中尝试添加style="line-height:50%;display:block;"

有时，如果您的表格单元格只是一个图像，它会添加额外的填充，尽管您尝试将其设置为零。

在 HTML 方面我只是一个初学者，但是当我遇到类似问题时这很有效。

【讨论】：