为什么不同的设备/电子邮件客户端显示此 CSS 的方式不同？答案

【问题标题】：Why are different devices/email clients displaying this CSS differently?为什么不同的设备/电子邮件客户端显示此 CSS 的方式不同？
【发布时间】：2018-11-23 09:58:40
【问题描述】：

我有一个 HTML/CSS 支持票设计，在不同设备上查看时似乎出现不一致的故障。在 PC 上给定的网络浏览器上，我的代码运行良好。然而，当从几个不同的移动电子邮件客户端查看时，不同的部分开始完全崩溃。这是我的sn-p：

.container {
  width: 700px;
  margin: 100px auto;
}

.progressbar {
  counter-reset: step;
}

.progressbar li {
  /*name of incomplete tasks */
  list-style-type: none;
  width: 20%;
  float: left;
  font-size: 12px;
  font-family: sans-serif;
  position: relative;
  text-align: center;
  color: #000000;
}

.progressbar li:before {
  /*circle of incomplete tasks */
  width: 20px;
  height: 20px;
  content: "";
  counter-increment: step;
  line-height: 20px;
  border: 2px solid #535659;
  display: block;
  text-align: center;
  margin: 0 auto 5px auto;
  border-radius: 50%;
  background-color: white;
  position: relative;
  z-index: 1;
}

.progressbar li:after {
  /* line preceding incomplete tasks */
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #535659;
  top: 12px;
  left: -50%;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.done {
  /* check mark and name of completed tasks */
  color: #94d60a;
}

.progressbar li.done:before {
  /* circles of completed tasks */
  border-color: #94d60a;
  content: "\2713";
}

.progressbar li.done+li:after {
  /* line following completed tasks */
  background-color: #94d60a;
}

<!DOCTYPE html>
<html>

  <div style="width:650px; background-color:#bbbcbc;">
    <header>
      <h1>
        <a style="color:#000000;background-color:white;">Company Name</a><a style="color:#94d60a;background-color:white;">.</a>
      </h1>
    </header>
    <table width="95%" align="center" cellpadding="10" style="width:95%; background-color: #535659;">
      <tbody>
        <tr>
          <td style="padding-left:15px">Case Number: 0000069</td>
        </tr>
      </tbody>
    </table>
    <table cellpadding="10">
      <tbody>
        <tr>
          <td style="padding-left:35px">Date Opened: 10/31/2017 at 2:13 PM</td>
        </tr>
      </tbody>
    </table>
    <table width="95%" align="center" cellpadding="10" style="width:95%;background-color:white;">
      <tbody>
        <tr>
          <td style="padding-left:20px;">
            You are receiving this email because your case has been updated. Your case details and any updates can be found below this message.
            <br /> If you wish to post a comment to the case you can simply reply to this email and your case will be updated. If you would like to include a screenshot or relevant log files you can do so by including them in your reply.
          </td>
        </tr>
        <tr>
          <td align="center" style="text-align: center;">
            <span class="container">
            <ul class="progressbar">
              <li class="done">Open</li>
              <li class="done">In Progress</li>
              <li class="done">With Engineering</li>
              <li class="done">Resolution Provided</li>
              <li>Closed</li>
            </ul>
          </span>
          </td>
        </tr>
        <tr>
          <td style="padding-left:20px;">
            In order to proceed with your case we will need additional information or clarification on the reported issue. Please provide the requested information within the next 4 days. If no response is received during this time we will temporarily archive your
            case. Once you are ready to continue with simply reply to one of the case emails.
          </td>
        </tr>
        <tr>
          <td></td>
        </tr>
        <td>
          <table cellpadding="5" style="border-collapse:collapse;">
            <tbody>
              <tr>
                <td width="150" style="width:150px;background-color:#bbbcbc;padding-left:20px;border-left:10px solid #d9d9d6;">
                  <span style="background-color:#bbbcbc;">Subject</span>
                </td>
                <td width="350" style="width:350px;border:1px solid #bbbcbc;">TICKET TITLE HERE</td>
              </tr>
              <tr>
                <td width="150" style="width:150px; background-color:#bbbcbc;padding-left:20px;border-left:10px solid #d9d9d6;">
                  <span style="background-color:#bbbcbc;">Description</span>
                </td>
                <td width="350" style="width:350px;border:1px solid #bbbcbc;">TICKET DESCRIPTION HERE</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tbody>
    </table>
    <table width="95%" align="center" cellpadding="10" style="width:95%;text-align:center;background-color:#bbbcbc;">
    <tbody>
      <tr>
        <td style="padding-top:10px">Company Name: Company Address</td>
      </tr>
    </tbody>
    </table>
  </div>
</html>

但是，当在不同的设备和客户端上运行时，会出现以下结果：

iPhone 6S Plus@Outlook:

Google Pixel 2 XL@Gmail:

iPhone 6s Plus @Mail（默认应用）：

是什么导致了这些不一致？我该如何解决它们？非常感谢您的帮助。

【问题讨论】：

根据我的经验，电子邮件客户端的行为不正常——我认为他们的实现不遵循任何标准——使用单独的 CSS 声明；当我为客户做 HTML 传单时，我不得不使用所有的内联 CSS。
@MatthewMoore 我对 HTML 和 CSS 都很陌生 - 你能详细说明我该怎么做吗？我通过在我正在使用的编辑器顶部使用
为电子邮件格式化电子邮件模板真的很痛苦。我找到了一个做得很好的服务，而且它是开源的，所以你不必使用像limus 或类似mjml.io 的付费服务。我使用其中一个模板并对其进行一些修改以查看我希望它的外观，然后简单地将其复制到我的 html 文件中，我的电子邮件每次在所有电子邮件客户端中看起来都完美无瑕。
有关内联样式的信息，quackit.com/css/inline_style_sheets.cfm 给出了它的简要介绍。（在正常情况下，这是丑陋的、不可维护的和不好的做法）。但@Curious13 也提出了一个好的 - 可能更好的 - 建议。

标签： html css formatting html-email

【解决方案1】：

简短的回答是每个电子邮件客户端的行为不同，并且每个都支持不同数量的 css 样式。 Campaign Monitor's Ultimate Guide to CSS 上有一个非常全面的样式列表以及哪些浏览器/版本支持。

如何解决这些问题的答案非常复杂。每个客户端的每个版本都有一长串提示和技巧，以使其更好地工作，这可能会破坏您在其他客户端中的 CSS。以下是如何使用 Outlook 的几个方面：

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

查看您的电子邮件在多个浏览器中的表现的最佳方式是使用Litmus 之类的服务，该服务有试用期，因此您可以将其与mjml.io 等免费选项进行比较

【讨论】：