为什么 Apple 的本机邮件客户端会截断（不显示）HTML 的结尾？

Question

我正在创建电子邮件通讯，并实际测试各种（本机和网络）邮件客户端。到目前为止，Gmail、Outlook.com（本机）iOS 邮件客户端正在按预期显示电子邮件。只有 MacOS 的本机邮件客户端切断了邮件的结尾，但 HTML 代码仍然存在（在 Apple Mail 中打开原始源时）。有谁知道如何防止这种情况发生？

到目前为止，我尝试添加空 div 元素、换行符 (< br >) 和图像。最后一个选项显示了预期的文本，但截断了图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head><meta name="viewport" content="width=device-width,initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unread News | Issue #1 14.05.2019</title>
    <style type="text/css">* {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    a {
        color: #2ba9e0;
        text-decoration: none;
        text-decoration-style: initial;
        text-decoration-color: initial;
    }
    p {margin: 1em 0;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
    h1 {
        text-align: center;
        font-size: 40px;
        margin-bottom: 20px;
        line-height: 1.2em;
        font-weight: 300;
        text-transform: none;
    }
    h1, h2, h3, h4, h5, h6 {color: #3A3A3A !important;} /* or whatever color you want it to be */

    h2 {
        font-size: 30px;
        margin-bottom: 20px;
        line-height: 1.2em;
        font-weight: 300;
        text-transform: none;
    }

    h3 {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 1.2em;
        font-weight: 400;
        text-transform: none;
    }

    body {
        margin: 0;
        padding: 0;
        color: #3a3a3a;
        font-weight: 400;
        text-transform: none;
        font-size: 17px;
        line-height: 1.5;
    }

    table {
        background: white;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
        line-height: 100% !important;
    }

    p {
        margin: 0;
        padding: 0;
    }

    .logo {
        margin-top: 3vh;
        width: 80%;
        max-width: 400px;
    }

    .subject-td {
        max-width: 100%;
        margin-top: 10px;
    }

    .center__text {
        text-align: center;
    }

    .main__content {
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 5%;

    }

    .small {
        font-size: 12px;
    }
    .footer{
        padding-top: 10px;
    }
    </style>
</head>
<body>
<p></p>

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td class="small center__text">Wenn du Unread durch Zufall erhalten hast, kannst du dich <a href="https://unread.news?newsletters_link=e4f7fa2ee4e645fd368c7ea87ca3b13d&history_id=1">hier</a> anmelden!</td>
    </tr>
    <tr>
        <td class="small center__text">Wenn Dir Unread gefällt, dann nimm Dir eine Sekunde Zeit und leite diese Mail an deine Freunde weiter.</td>
    </tr>
    <tr>
        <td class="center__text"><img class="logo" src="data:image/png;base64, ... base64 goes here ... " /></td>
    </tr>
    <tr>
        <td class="subject-td center__text">
            <h1>Unread News | Issue #1 14.05.2019</h1>
        </td>
    </tr>
    <tr>
        <td class="main__content"><div class="newsletters_content"><h2>Category 1</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="#">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h2>Category 2</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h2>Category 3</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h2>Category 4</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
        </div></td>
    </tr>
    <tr>
        <td class="small footer center__text">This is emai was sent ...</td>
    </tr>
    <tr>
        <td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
    </tr>
    <tr>
        <td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
    </tr>
    </tbody>
</table>
</body>
</html>

Apple Mail 截断（不显示）最后三个标签：

</tr>
<tr>
    <td class="small footer center__text">This is emai was sent ...</td>
</tr>
<tr>
    <td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
</tr>
<tr>
    <td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
</tr>

但我希望看到他们。

Answer 1

这很奇怪。我找不到你的代码有什么特别的错误。我用我的一个模板中的一个片段替换了头部，但没有任何效果。您的代码也非常轻量，因此没有代码膨胀或隐藏错误的问题。

一件确实有效但令人讨厌的事情是在电子邮件底部添加填充。我将内容包装在另一个 table 中，并在 table 单元格上设置填充，用您的内容包装 table 。 50 像素的填充足以将 Apple Mail 向下推并显示所有三行。

为什么 Apple 的本机邮件客户端会截断（不显示）HTML 的结尾？

Why is Apple's native Mail Client cutting off (not showing) the end of HTML?

html

css

macos

html-email

apple-mail