Outlook 2019 背景颜色渲染错误答案

【问题标题】：Outlook 2019 background color rendering bugOutlook 2019 背景颜色渲染错误
【发布时间】：2021-09-29 15:04:41
【问题描述】：

由于某种原因，我们电子邮件中的白色标题在 Outlook 2019 中开始显示穿过它的粗灰线。其他电子邮件客户端工作正常。

起初我们认为它只是一个试金石，但不是因为它在客户端收到电子邮件时也可见。

尽管我们的大多数电子邮件共享相同的标题，但这种情况最近才开始发生，这里是屏幕截图（我添加了蓝色部分以隐藏客户信息）：

还有代码：

                <tr>
                    <td>
                        <table
                                border="0"
                                width="100%"
                                cellpadding="0"
                                cellspacing="0"
                                align="center"
                                style="width: 100%;"
                        >
                            <tr style="
                                    background-color: #FFFDFB;
                                    width: 100%;
                                    "
                                width="100%"
                            >
                                <td
                                    style="
                                    padding-left: 35px;
                                    padding-top: 25px;
                                    padding-bottom: 25px;
                                    width: 100%;"
                                    width="100%"
                                >
                                <a href="#" target="_blank" style="text-decoration: none;">
                                    <img
                                        src="logo.png"
                                        align="left"
                                        class=""
                        
                                        alt="Logo"
                                        border="0"
                                        style="margin: auto;"
                                    />
                                </a>
                                </td>
                                <td
                                    width="100%"
                                    style="
                                    text-align: right;
                                    font-size: 15px;
                                    line-height: 1;
                                    padding-bottom: 25px;
                                    padding-top: 25px;
                                    margin-top: 0px;
                                    padding-right: 35px;
                                    font-family: CUSTOM-FONT-NAME, Inter, sans-serif;
                                    margin: 0;
                                    width: 100%;
                                ">
                                    <p>
                                        <a href="#" target="_blank" style="text-decoration: none;white-space: nowrap;.">
                                            <span style="color: #a6a6a6;text-decoration: none;">myPAGE</span>
                                        </a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

【问题讨论】：

标签： html email outlook html-email litmus

【解决方案1】：

我的第一个想法是放弃表格行上的样式。它们实际上是为了结构而存在的，我总是建议避免向它们添加样式，而是依靠表格、表格单元格（td 或 th）或表格单元格内的 div 来进行样式设置。它在过去可能对你有用，但这是我在这里和其他平台上不时出现的用于电子邮件调试的东西之一，它通常是调试其他开发人员代码时的共同点。

我也会避免在多个单元格上添加 width:100%。我认为这不会给您带来问题，但同样是其中之一，您越容易让电子邮件客户端理解您的代码，您就越容易将设计转换为 HTML。电子邮件客户端将自动使表格单元格等宽或根据任一单元格中的内容进行调整。在你的情况下告诉他们 100% 几乎是在告诉电子邮件客户基本上 - “继续，做任何你喜欢的事情。” 尝试明确您的宽度，或者如果它们应该平分，则根本不声明它们。然后进行测试，看看结果如何，然后从那里开始。

以下是我将如何更改您的代码。事实证明，是图像上的 align="left" 导致了问题。我也会避免这种情况，并在表格单元格上声明对齐属性，图像将为您继承该属性。

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="width: 100%; background-color: #FFFDFB; ">
    <tr>
        <td align="left" style="padding-left: 35px; padding-top: 25px; padding-bottom: 25px;">
            <a href="#" target="_blank" style="text-decoration: none;">
                <img src="https://via.placeholder.com/150x50" class="" alt="Logo" border="0" style="margin: auto;" />
            </a>
        </td>
        <td style=" text-align: right; font-size: 15px; line-height: 1; padding-bottom: 25px; padding-top: 25px; margin-top: 0px; padding-right: 35px; font-family: CUSTOM-FONT-NAME, Inter, sans-serif; margin: 0;">
            <p>
                <a href="#" target="_blank" style="text-decoration: none;white-space: nowrap;.">
                    <span style="color: #a6a6a6;text-decoration: none;">myPAGE</span>
                </a>
            </p>
        </td>
    </tr>
</table>

【讨论】：

感谢您的宝贵时间，该解决方案效果很好！