电子邮件通讯：如何保持标题的行高一致？答案

【问题标题】：E-mail newsletters: how do I keep line height for headers consistent?电子邮件通讯：如何保持标题的行高一致？
【发布时间】：2012-09-25 13:09:09
【问题描述】：

我一直在浏览电子邮件通讯设计和编码的荆棘补丁。一个问题不断出现：我的标题的行高在不同的电子邮件客户端之间不一致。

一组为标题提供了很大的空间，其中包括 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 css email newsletter html-heading

【解决方案1】：

如您所见，您不想在 HTML 电子邮件中依赖 line-height，因为客户端之间的支持非常糟糕且不一致。不幸的是，解决这个问题的方法是重构你的代码以嵌套一些tables。

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。

【讨论】：