我正在尝试HTML电子邮件的样式,显然是使用表格和内联样式。我在用litmus.com测试
我得到了非常好的一致的结果,除了在2个客户端-火狐的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 likes to add a little margin to images显示为默认值。
编辑:基于下面的注释:看起来inline
中有一个td
的rowspan
值为4,而您的table
中只有3行可能的行。如果你把4改成3呢?