Question

我正在处理带有多个分隔符的电子邮件。通过所见即所得编辑器进行编辑时，表单元格中的 字符将被删除。我尝试使用&zwj字符解决此问题，并且该代码适用于大多数电子邮件客户端，但是Outlook 2016在分隔符上方显示一条线。

屏幕截图

Screenshot

有没有比这更好的解决方案了？

<tr>
    <td bgcolor="#222222" style="font-size: 1px; line-height:16px; color:#222222">&zwj;</td>
</tr>

Answer 1

Outlook 2016在添加这些行时存在问题。其他开发人员报告说，此问题归结于Outlook 2016转换空白。

您可以尝试定位Outlook并折叠边框。只需添加：

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }
</style>
<![endif]-->

值得注意的是，根据您电子邮件的结构方式，这可能不适合您。它可以在某些电子邮件上使用，但是会对设计的整体呈现产生不利影响。

您也可以尝试匹配背景。与其说是解决，不如说是掩饰。线从<body>标记继承颜色。因此，通过将<body>的背景色设置为与我们的问题部分相同的颜色，我们基本上覆盖了所有行。他们还在，是的，但是没人会看到他们。我们还只希望针对有问题的客户。无需更改正确呈现电子邮件的客户端的背景颜色。

只需将其添加到电子邮件的<head>中，更改背景颜色以匹配问题部分。

<!--[if (gte mso 9)|(IE)]>
        <style type="text/css">
        body { background-color:#123456 !important;}
        </style>
<![endif]-->

Answer 2

根本无法复制此内容。您有机会查看完整的模板代码吗？您的HTML可能存在更广泛的潜在问题。

或者，将您的&zwj;声明更改为&zwnj; 那是零空格字符的正确HTML版本。当我在其中一个模板中测试您的代码段时，zwj在Litmus中也无法正确显示。

Answer 3

您是否尝试过使用border而非background来设置颜色？

<tr>
    <td style="font-size: 1px; line-height:0; border-bottom: 1px solid #222222;">&zwnj;</td>
</tr>

如果发现即使ESP不会混淆&zwnj;和 字符，Outlook有时也可能会奇怪地解释height和line-height。如果我们使用的是mso-line-height-rule: exactly;。

我在自己的工作中使用border，但尚未发现问题。