我一直在浏览电子邮件通讯设计和编码的 briar 补丁。一个问题不断出现:我的标题行高在不同的电子邮件客户端之间不一致。
一组为标题提供了大量空间,其中包括 Gmail 和 iPhone:
另一组,主要是 Outlook,以较少的余地呈现标题:
我的代码如下:
<table width="540" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-top-orange.gif" width="270" height="7" style="display:block;"></td>
<td rowspan="3" width="270" height="199"><img editable width="270" height="199" style="display:block;"></td>
</tr>
<tr bgcolor="#f68b1f" >
<td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
<td width="15" height="185" bgcolor="#f68b1f"></td>
<td width="223" height="185" bgcolor="#f68b1f" align="left" valign="top"><a name="item2" style="text-decoration: none;"><h2 style="font-family: Arial, Verdana, sans-serif; font-size: 15px; color: white !important; color:white;"><singleline label="Title" repeatertitle="true" style="color: white;">Lorem ipsum</singleline></h2></a><multiline><p style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: white;">Lorem ipsum dolor sit amet</p></multiline></td>
<td width="15" height="185" bgcolor="#f68b1f"></td>
<td width="7" height="185"><img src="img/shading-right-small.gif" width="7" height="185" style="display: block;"></td>
</tr>
<tr>
<td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-bottom-orange.gif" width="270" height="7" style="display:block;"></td>
</tr>
根据需要填写文本的 newletter 应用程序。
我如何以所有(或大多数)客户端呈现 Gmail 中的标题的方式编写这篇文章?我已经尝试了很多事情,比如为标题添加另一个嵌套表格,给它一个橙色的顶部边框等。这些修复也会影响 Gmail 呈现,这不是我想要的。
最佳答案
如您所见,您不想依赖 HTML 电子邮件中的 line-height
,因为客户端之间的支持非常糟糕且不一致。不幸的是,解决这个问题的方法是重构您的代码以嵌套一些表
。
Check out this Fiddle here ,我基本上只是在第二个 tr
的 td
中嵌套了另一个 table
。这个表格有一个完整的 td
,他唯一的工作就是达到特定的高度并在标题上方创建一些填充:
<tr bgcolor="#f68b1f" >
<td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
<td colspan="3">
<table> <!--the new nested table-->
<tr>
<td bgcolor="#f68b1f" colspan="3" height="15"></td>
</tr>
不幸的是,在 HTML 电子邮件的世界中,您必须依赖这些基于表格的布局技巧,而不是像 line-height
这样的实际 CSS。
关于html - 电子邮件通讯 : how do I keep line height for headers consistent?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12728263/