Outlook 2019背景颜色渲染错误

Question

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

起初我们以为这只是一个试金石错误，但事实并非如此，因为它在客户端收到电子邮件时也是可见的。

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

代码：

                <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>

Answer 1

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

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

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

<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>

Outlook 2019背景颜色渲染错误

Outlook 2019 background color rendering bug

html

email

outlook

html-email

litmus