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

问题描述

|| 我正在尝试样式化HTML电子邮件，显然使用表格和内联样式。我正在使用石蕊.com进行测试 除了2个客户端-Firefox上的Hotmail和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>

我在其渲染方式下放置了两张图片-忽略了为测试添加的黄色部分。     

解决方法

尝试在图像中添加

display:block

。 GMail喜欢为显示为

inline

的图像（默认设置）增加一点空白。 编辑：基于下面的评论：似乎有一个

td

，其中

rowspan

为4，而您的

table

中只有3个可能的行。如果您将4更改为3怎么办？     ,在表中尝试添加

style=\"line-height:50%;display:block;\"

有时，如果您的表格单元格只是一个图像，则尽管您尝试将其设置为零，也会增加额外的填充。 在HTML方面，我只是一个初学者，但是当我遇到类似的问题时，此方法就可以了。