有关布局的html电子邮件问题

我有好几年没有发送任何邮件，我记得当时的过程非常痛苦。有关布局的html电子邮件问题

我已将我的设计分割为三个部分，并将它们放置在一张桌子中，桌子的高度和宽度都已定义，所以所有单个元素都是这样，但是在Gmail等电子邮件客户端中查看时，三个表格行。

我的html。我想你会同意它不能被简化！

<table border="0" cellpadding="0" cellspacing="0" width="550" height="550"> 
<tr> 
    <td colspan="2" bgcolor="#ffffff" width="550" height="104"> 
<img src="images/OC_01.gif" alt="" width="550" height="104"></td> 
</tr><tr> 
    <td bgcolor="#ffffff" width="246" height="341"> 
<img src="images/OC_02.gif" alt="" width="246" height="341"></td> 
    <td bgcolor="#ffffff" width="304" height="341"> 
<img src="images/OC_03.gif" alt="" width="304" height="341"></td> 
</tr><tr> 
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top"> 
<a href="TBA"><img src="images/OC_04.gif" alt="" width="550" height="105"></a></td> 
</tr> 
</table>

有没有人今天在这里有足够的电子邮件html经验指向我在正确的方向？

编辑补充：我一直在解剖过去发给我的一些商业电子邮件，我发现其中一些邮件在Gmail中也有这个奇怪的间距问题。我也注意到，每个设计都是为了适应行之间的任何额外间距，所以我将假设这个问题的答案是确保设计的产生方式是这些差距不是问题。

来源

2011-12-18 Andrew

有是没有正确关闭的TR。第一行，是一个错字？你也没有关闭表格标签。 – SeanNieuwoudt 2011-12-18 12:54:48

我看到你的意思是未封闭的标签，但是，当我将html粘贴到上面的消息中时，我的原始TR标签在下一行开始TR之前关闭，并且我有一个关闭

标签。抱歉，关于剪切和粘贴不良的工作。我将以更好的代表性更新开幕式。 – Andrew2011-12-18 13:04:29

如果从表格本身和列中取出高度属性，会发生什么情况？让高度自动确定 – SeanNieuwoudt 2011-12-18 13:07:01

回答

添加ALIGN = “顶” 到的图像似乎是一个可能的解决方法：

<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="2" bgcolor="#ffffff"> 
    <img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/> 
</td> 
</tr> 
<tr> 
<td bgcolor="#ffffff" width="246"> 
    <img src="images/OC_02.gif" alt="" width="246" height="341" align="top" /> 
</td> 
<td> 
    <img src="images/OC_03.gif" alt="" width="304" height="341" align="top" /> 
</td> 
</tr> 
<tr> 
<td colspan="2" bgcolor="#014280"> 
    <a href="addlater"><img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></a></td> 
</tr> 
</table>

来源

2011-12-18 13:27:05 SeanNieuwoudt

小提琴究竟做了什么？ – 2011-12-18 13:30:36

令人沮丧的是，这也没有在Gmail中工作。但值得一试。 – Andrew 2011-12-18 14:21:25

添加以下属性到IMG元素：

style="display: block;"

我添加为你http://jsfiddle.net/xE9Qr/

默认IMG 显示是我nline-block之后会产生不需要的空间。

我已经使用http://ctrlq.org/html-mail/对它进行了测试，现在TR元素之间的空间已经消失。记住要查看结果，您必须将HTML表格布局电子邮件发送到您的gMail帐户。

来源

2011-12-18 13:42:07 vlgalik

嗨，我以为这可能是它，但当你发送实际的电子邮件时，我仍然在Gmail中得到间距问题。感谢这个想法。 – Andrew 2011-12-18 14:15:21

你使用什么浏览器？另外截图会很好。 – vlgalik 2011-12-18 14:50:49

我也不得不使用font-size：0以及它来工作。 – motoxer4533 2011-12-18 15:01:47

您必须在所有图像中包含style =“display：block”以防止各种电子邮件客户端出现间隙问题。

例子：

<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty" 
width="1000" height="1000" 
style="border:none; margin:0px; padding:0px; **display:block;**"/>

来源

2012-06-12 16:16:54 Gabe

有关布局的html电子邮件问题

回答

相关问题