Question

我在HTML / CSS中有一个支持票设计，在不同设备上查看时似乎不一致。在PC上的给定Web浏览器上，我的代码完美运行。但是，从几个不同的移动电子邮件客户端查看时，不同的部分开始完全中断。这是我的片段：

.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（默认应用）：

导致这些不一致的原因是什么？我该如何解决这些问题？非常感谢您提前寻求帮助。

Answer 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等免费选项进行比较

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

1 个答案: