0

出于某种原因，我们电子邮件中的白色标题在 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>
4

1 回答 1

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>

于 2021-07-22T15:33:57.547 回答