为什么我的电子邮件客户端无法正确呈现 html 电子邮件？

Question

我已经阅读了大量不同的类似问题和答案，并且我知道电子邮件客户端存在大量兼容性问题。我还使用 mailchimp 兼容性指南构建了我的电子邮件，使用 table isstead of div 等...

在 codepen 上它看起来像这样（细微差别不是完全最新的）-

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title></title>
    <style>



body {
    background-color: white;
font-family: Nunito, Montserrat, monaco,Consolas,Lucida Console,monospace;
}

.col-8{
  width:700px;
}

      
table{width:100%; border-spacing: 0px;}

.content{
   background-color: white;
   padding:0px 85px 75px 85px;
   font-size: 16px;
}

.line{
  border-top:1px solid #ddd;
}
      
.socialImage{
  padding-top: 3rem;
}


</style>
</head>

<body style="background-color: black; padding: 3rem 10rem;">
  <table class="content" style="text-align: center; border-radius: 18px 18px; padding-top: 2rem;">
    <tr>
      <td>
        <i class="fas fa-check-circle" style="font-size: 3rem; color: rgb(127, 240, 58);"></i>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h1>Booking Confirmed</h1>
      </td>
    </tr>
    <tr>
      <td>
        <p>booking for <span style="font-weight: bold">User Name </span> has been confirmed </p>                  
      </td>
    </tr>
    <tr>
      <td style="padding: 5rem 5rem;background-color:#f2f2f2;border-radius: 8px;">
        <table>
          <tr style="text-align: left">
            <td colspan="2">
              <p style="font-weight:bold">Signup Name</p>
            </td>
          </tr>
          
          <tr></tr>
          <tr></tr>
          <tr>
            <td></td>
            <td>
              <p style="font-weight:bold">Total</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  
  <table>
    <td style="height: 5rem; background-color:black; width: 100%;"></td>
  </table>
  
  <table class="content" style="border-radius: 18px 18px;">
    <tr>
    <td style="text-align: right;">
      <a style="        text-decoration: none;        display: inline-block;" href="@Model.IOSAppLink">
                                <img class="socialImage" width="161" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style="        display: block;">
                            </a>
    </td>
      <td style="text-align: left;">
        <a style="        text-decoration: none;        display: inline-block;" href="@Model.AndroidAppLink">
                                <img class="socialImage" width="169" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style="        display: block;">
                            </a>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="width: 100%; text-align:center;">
        <p>
          Please do not reply directly to this email. If you have any questions or comments regarding this email, please contact us at support@plawaze.com
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center;">
        <img style="height: 4rem;" src="https://f.hubspotusercontent00.net/hub/8806450/hubfs/Playwaze_Logo_Orange_%23EA8A41.png?height=120&name=Playwaze_Logo_Orange_%23EA8A41.png"> 
      </td>
    </tr>
    <tr>
      <td colspan="2" style="height: 1rem; width: 100%"></td>
    </tr>
    <tr style="text-align: center;">
      <td colspan="2">
        Copyright &copy2021 Playwaze
      </td>
    </tr>
    <tr style="text-align: center;">
      <td colspan="2">
        Contact us:
      </td>
    </tr>
    <tr style="text-align: center;">
      <td colspan="2">
        The Lansbury Estate, 102 Lower Guilford Road, Woking, Surrey, GU21 2EP UK
      </td>
    </tr>
  </table>
    <!--<div class="booking-container-summary">
        <div class="booking-summary">
            <div class="booking-summary-name ">
                @Model.ActivityName
            </div>
            <div class=" booking-summary-price">
                @Model.Price
            </div>
            <div class="booking-date booking-summary-date">
                @Model.GroupPlayDate
            </div>
            <div class="booking-address booking-summary-address">
                @Model.Location
            </div>

        </div>
    </div>


    <br><br>
    <div style="width:100%;" class="booking-container-mobile-bottom">
        <div class="total-price-grid booking-price">

            <div>
                @Model.TotalPrice
            </div>
        </div>
<td class="content footer" style="padding-top:15px; padding-bottom:0px;">
              
                <table>

                    <tr>
                        <td align="right" valign="top" style="        width: 50%;        padding: 10px 10px 10px 0px;        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;        direction: ltr;">
                            <a style="        text-decoration: none;        display: inline-block;" href="@Model.IOSAppLink">
                                <img class="socialImage" width="161" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style="        display: block;">
                            </a>

                        </td>
                        <td align="left" valign="top" style="        width: 50%;        padding: 10px 10px 10px 0px;        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;        direction: ltr;  ">
                            <a style="        text-decoration: none;        display: inline-block;" href="@Model.AndroidAppLink">
                                <img class="socialImage" width="169" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style="        display: block;">
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
            <td></td>
<p class="sans outro">
                    Please do not reply directly to this email. @Model.Text
                </p>
<td class="contactsection">
                <span class="footerlogo"></span>
                <p class="sans contact" style="margin:0px">
                    Copyright @  2019 Playwaze
                    <br>
                    Contact Us:
                    <br>
                    First Floor, Steward House, 14 Commercial Way, Woking, GU21 6ET
                </p>
            </td>
    </div>-->
</body>

</html>

但在电子邮件中看起来像这样 -

我完全明白这是某个地方的兼容性问题，但谁能帮我确定是哪里？这是我第一次（希望也是最后一次）尝试创建 html 电子邮件。

Answer 1

当您将电子邮件编辑为 HTML 时，您必须考虑旧版本的 HTML，例如 HTML 4 及以下版本。此外，出于明显的安全原因，电子邮件客户端对下载哪些相关资源有一些限制。

通过删除 HTML5 DOCTYPE 声明、链接字体和链接样式表，并清理内联声明，我得到以下代码：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body {
            background-color: white;
            font-family: Nunito, Montserrat, monaco, Consolas, Lucida Console, monospace;
        }

        .col-8 {
            width: 700px;
        }

        table {
            width: 100%;
            border-spacing: 0px;
        }

        .content {
            background-color: white;
            padding: 0px 85px 75px 85px;
            font-size: 16px;
        }

        .line {
            border-top: 1px solid #ddd;
        }

        .socialImage {
            padding-top: 3rem;
        }
    </style>
</head>

<body style="background-color: black; padding: 3rem 10rem;">
    <table class="content" style="text-align: center; border-radius: 18px 18px; padding-top: 2rem;">
        <tr>
            <td>
                <i class="fas fa-check-circle" style="font-size: 3rem; color: rgb(127, 240, 58);"></i>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <h1>Booking Confirmed</h1>
            </td>
        </tr>
        <tr>
            <td>
                <p>booking for <span style="font-weight: bold">User Name </span>
                    has been confirmed </p>
            </td>
        </tr>
        <tr>
            <td style="padding: 5rem 5rem;background-color:#f2f2f2; border-radius: 8px;">
                <table>
                    <tr style="text-align: left">
                        <td colspan="2">
                            <p style="font-weight:bold">Signup Name</p>
                        </td>
                    </tr>
                    <tr></tr>
                    <tr></tr>
                    <tr>
                        <td></td>
                        <td>
                            <p style="font-weight:bold">Total</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <td style="height: 5rem; background-color:black; width: 100%;"></td>
    </table>

    <table class="content" style="border-radius: 18px 18px;">
        <tr>
            <td style="text-align: right;">
                <a style="text-decoration: none;display: inline-block;" href="@Model.IOSAppLink">
                    <img class="socialImage" width="161" height="50" border="0" alt=""
                        src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style="display: block;">
                </a>
            </td>
            <td style="text-align: left;">
                <a style="text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
                    <img class="socialImage" width="169" height="50" border="0" alt=""
                        src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style="display: block;">
                </a>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="width: 100%; text-align:center;">
                <p>
                    Please do not reply directly to this email. If you have any questions or
                    comments regarding this email, please contact us at support@plawaze.com
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <img style="height: 4rem;"
                    src="https://f.hubspotusercontent00.net/hub/8806450/hubfs/Playwaze_Logo_Orange_%23EA8A41.png?height=120&name=Playwaze_Logo_Orange_%23EA8A41.png">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="height: 1rem; width: 100%"></td>
        </tr>
        <tr style="text-align: center;">
            <td colspan="2">
                Copyright &copy2021 Playwaze
            </td>
        </tr>
        <tr style="text-align: center;">
            <td colspan="2">
                Contact us:
            </td>
        </tr>
        <tr style="text-align: center;">
            <td colspan="2">
                The Lansbury Estate, 102 Lower Guilford Road, Woking, Surrey, GU21 2EP UK
            </td>
        </tr>
    </table>
</body>

</html>

它给出的结果没有图标或花哨的字体，但演示文稿更接近您正在寻找的内容。您可以通过使用标准字体（Helevetica Arial？）和图标的嵌入式图像来进一步实现您的目标

现在，如果您希望能够调试它，您还需要编写更清晰的代码：

坚持 <style> 元素中的 CSS（最好）或内联声明；不是两者
正确缩进
避免不必要的 space 分散在您的代码中
等等

最后，使用旧的 HTML 标签并不一定意味着到处都是 table。您可以使用 table 进行布局，因为它可以帮助您居中并 space 您的文档部分，但每个单元格内都有公共块。代码将更简洁，因此更易于人类和电子邮件客户端阅读...

编辑还有一点：根据您的电子邮件正文的编码方式，您可能会遇到以“.”开头的 CSS 行的问题。我为此找到的唯一修复方法是避免以点开始行，例如重写所有 CSS 行，如

.col-8 {

进入

*.col-8 {

或者将您的整个电子邮件正文包裹在 <div> 和 id 中，并在每个 css 规则前加上此 ID，这也有助于网络邮件客户端将您的 CSS 来自网站的

为什么我的电子邮件客户端无法正确呈现 html 电子邮件？

Why is my email client not rendering html email correctly?

html

css

email

html-email