Outlook HTML 电子邮件的边框宽度差异答案

【问题标题】：border width discrepancy for Outlook HTML emailsOutlook HTML 电子邮件的边框宽度差异
【发布时间】：2013-08-20 08:45:39
【问题描述】：

我正在创建一个 html 电子邮件，我需要在表格之间添加一些垂直间距。为了解决 Outlook 2007、2010 和 2013 不支持 margin-top 和 margin-bottom 的问题，我决定使用完全支持的边框样式在表格之间添加间距。

我在表格底部添加了一个边框，并通过premailer 运行它以获得以下内联样式：

<table align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; width: 600px; border-bottom-width: 20px; border-bottom-color: #f3f2ef; background-color: white; border-style: none none solid;" bgcolor="white">

这可行，但是 Outlook 2007、2010 和 2013 的边框宽度远小于其他电子邮件客户端的边框宽度。我把结果放到photoshop里，测量了8px，应该是20px。

谁能告诉我造成这种差异的原因是什么？

【问题讨论】：

标签： html outlook html-email newsletter

【解决方案1】：

如果您愿意放弃使用边框，我可能有其他解决方案。

根据我的经验，边框是不可靠的，所以我通常在 td 中使用透明间隔 gif，像这样：

<tr>
  <td bgcolor="#f3f2ef">
    <img src="http://www.yourdomain.com/images/spacer.gif" style="display:block;" width="1" height="20" alt="">
  </td>
</tr>

将此作为表格中的最后一行，您应该进行设置。

【讨论】：

@irdesign - 谢谢，我现在已经完成了，一切正常。我会将问题留待一段时间，看看是否有实际解决问题的方法，如果没有，我会将您的问题标记为答案。

【解决方案2】：

您可以通过在其中创建带有&nbsp; 的表格来绕过使用间隔 gif。示例：

<table width="600" cellpadding="0" cellspacing="0" align="left">
  <tr>
    <td width="20" bgcolor="#959595">&nbsp;</td>
    <td width="560" bgcolor="#959595" style="padding: 0px;">&nbsp;</td>
    <td width="20" bgcolor="#959595">&nbsp;</td>
  </tr>
  <tr>
    <td width="20" bgcolor="#959595">&nbsp;</td>
    <td width="560" bgcolor="#FFFFFF" style="padding: 20px;">&nbsp;<br>Content<br>...<br>&nbsp;</td>
    <td width="20" bgcolor="#959595">&nbsp;</td>
  </tr>
  <tr>
    <td width="20" bgcolor="#959595">&nbsp;</td>
    <td width="560" bgcolor="#959595" style="padding: 0px;">&nbsp;</td>
    <td width="20" bgcolor="#959595">&nbsp;</td>
  </tr>               
</table>

【讨论】：

【解决方案3】：

我同意 DevinKoncar 的观点，即 spacerimages 有时是唯一的解决方案，但我最后一次有使用它的冲动是几年前的事了。顺便说一句，这些图像的命名对于您的垃圾邮件评级很重要，因此既不要使用“spacer”也不要使用“pixel”，而是按颜色命名它们（如 white.gif）。 Outlook Online 的预览窗格会在您尚未下载间隔图像时更改它们的大小，这在几乎所有设计中都非常难看。不要使用 PNG：某些邮件客户端（如 Lotus Notes）的渲染存在问题。

如果您只想在两个表之间创建一个空格，您可以只使用 BR 标记，不是吗？只需在周围的表格中设置字体大小和行高。唯一的限制是表格下方的 BR 标记，但在两个之间从来都不是问题。

此外，您可以将 BR 标记作为 td 内的唯一内容，并使用 font-size 和 line-height 创建所需的高度。

    <table cellpadding="0" cellspacing="0" border="0" align="center" width="600"><tr><td bgcolor="#ffffff" style="font-size:20px; line-height:20px;"><br />
        <table cellpadding="0" cellspacing="0" border="0" align="center" width="500"><tr><td bgcolor="#f1f1f1" style="font-size:20px; line-height:20px;">Row 1</td></tr></table><br />
        <table cellpadding="0" cellspacing="0" border="0" align="center" width="500"><tr><td bgcolor="#f1f1f1" style="font-size:20px; line-height:20px;">Row 2</td></tr></table>
    </td></tr></table>

【讨论】：