Outlook 2019 背景色渲染錯誤

Question

出於某種原因，我們的電子郵件中的白色標題開始顯示在 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>

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