邮件模板HR标签发送后消失，表格替代方案在Gmail中失效求助

问题描述 #

我在创建新闻通讯（newsletter）模板时，希望为每个产品添加分隔线，但<hr>标签无法正常工作——在Chrome浏览器中显示正常，发送给邮件服务商后就消失了。尝试过div、表格、CSS属性等方案均未解决，后来改用表格替代<hr>，代码如下，但该方案仅在Outlook、Aol和Yahoo中正常显示，在Gmail中失效：

<table style='border-collapse: collapse; width: 100%;'>
        <tr style='border-bottom: 1px solid #BDBDBD;'>
            <th>&nbsp;</th>
        </tr>
</table>

问题原因 #

不同邮件客户端对HTML和CSS的支持差异极大：

• <hr>标签被邮件服务商过滤，是因为部分邮箱客户端不支持该标签的默认样式，或会自动清理这类标签；
• Gmail会过滤表格行（<tr>）的border-bottom样式，同时对表头单元格（<th>）的样式支持有限，导致你用表格实现的分隔线在Gmail中失效。

可行解决方案 #

1. 背景色单元格方案（全客户端兼容） #

这是兼容性最好的实现方式，所有主流邮箱客户端都能识别：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="1" bgcolor="#BDBDBD"></td>
  </tr>
</table>

通过设置高度为1px、背景色为目标颜色的单元格模拟分隔线，完全不依赖border属性，避免被Gmail过滤。

2. 单元格内联border方案 #

如果要保留原有表格结构，将border样式移到普通单元格（<td>）上，Gmail能识别单元格的内联样式：

<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <td style="border-bottom: 1px solid #BDBDBD;">&nbsp;</td>
  </tr>
</table>

注意将原代码中的<th>替换为<td>，提升兼容性。

3. 条件注释兼容方案 #

针对Outlook和其他客户端做差异化处理，兼顾所有场景：

<!--[if mso]>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="1" bgcolor="#BDBDBD"></td>
  </tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<div style="height:1px; width:100%; background:#BDBDBD; line-height:1px;">&nbsp;</div>
<!--<![endif]-->

Outlook会渲染表格版本，其他客户端渲染div版本，完美解决跨客户端兼容问题。

内容的提问来源于stack exchange，提问作者Raziak