在 Hotmail HTML 电子邮件中使用 <div> 作为垂直分隔符的问题答案

【问题标题】：Issue using <div> as vertical spacer in Hotmail HTML email在 Hotmail HTML 电子邮件中使用 <div> 作为垂直分隔符的问题
【发布时间】：2013-02-06 05:24:19
【问题描述】：

我们在 HTML 电子邮件中使用以下代码作为垂直分隔符：

<div style="height:14px; font-size:14px; line-height:14px;">&#160;</div>

这在任何地方都很好用——除了 Hotmail，它会创建一个非常大的空间。我们对此进行了一些研究，似乎 Hotmail 默认嵌入 CSS 会导致很多问题。

我们已包含以下代码以尝试解决此问题，但无济于事：

.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; margin: 0; padding: 0;}

希望这里的其他人可能有解决方案甚至解决方法。

【问题讨论】：

过去我非常依赖这种确切类型的垂直垫片，但从未遇到过麻烦。您能否发布电子邮件模板的完整 HTML 的链接（包括使用的 DOCTYPE），或者在上面的问题中添加足够大的 HTML 子集来重现问题？我想在 Litmus 中对此进行一些测试。我想知道这是否是最近几个月的新事物。

标签： css html-email hotmail

【解决方案1】：

如果它只是一个间隔，那么为什么不使用带有间隔图像的表格。大多数电子邮件客户端更喜欢表格而不是具有内联样式的 div，并且会正确呈现它。类似的东西：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="10">
      <img src="http://media.instantcustomer.com/22033/0/5_spacer.png" alt="" width="1" height="10" border="0" style="border:0" />
    </td>
  </tr>
</table>

将高度从 10 更改为您需要的任何高度。您必须在 td 和 img 元素中指定高度。如果您愿意，请替换间隔图像。您甚至可以完全不使用间隔图像。

【讨论】：

通常可以，但在 Hotmail 中也会出现同样的间距问题。在所有其他电子邮件客户端中，您编写的表格方法都可以完美运行。可以肯定的是，这一切都归功于 CSS Hotmail 默认嵌入。
如果您添加具有所需高度的纯白色/黑色/whatever-bg-color 图像，而不是使用表格或 div 创建垂直空间，该怎么办？因此，如果您需要 100px 的白色垂直空间，那么您可以简单地创建一个 100px 高的图像并在所需的空间中使用它。
感谢您的建议。使用图像可以作为分隔符，但我试图避免这种情况，因为默认情况下通常不启用图像。如果我能在不使用图像的情况下找到解决方案，那将是理想的。

【解决方案2】：

你可以使用这个：<br>&nbsp<br> 或者你可以将它包裹在一个字体标签中来设置高度。您还可以在 <td> 或 saganbyte 建议的表格中使用填充。

请注意，Outlook 将<p> 标签包裹在表格周围，如果有人转发您的电子邮件，这会增加大约 15-20 像素的垂直间距。相反，使用表格行只会增加几个像素。考虑到这一点，请始终保持背景颜色相同，以免出现不需要的线条。

【讨论】：