Question

我目前正在使用Litmus在多个电子邮件平台上测试响应式电子邮件签名。到目前为止，格式在所有设备/平台上看起来都是完美的。问题是，当我实际上将Outlook中的电子邮件发送到Apple设备并在Apple Mail中打开它时，我的表确实不可用。

基本上，

它应该看起来像这样：

（在Outlook / gmail等移动设备/台式机上均如此）

但是，它将几乎每个字母都变成它自己的表元素，从而形成了分层表的绝对簇。（当时没有SS）。

所有适用的代码如下：

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<style>

* {-webkit-text-size-adjust: none}

@import url('https://fonts.googleapis.com/css?family=Montserrat');

@media screen and (max-device-width: 600px),
screen and (max-width: 600px)     {

}

body{
  font-family: Montserrat, Helvetica;
}

a{
  color: white;
}

h1{
  margin: 0;
}

p{
  margin: 0;
}

</style>
</head>
<body>
<table style="vertical-align: center">
    <tr>
      <td>
        <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="" alt="logo">
      </td>
      <td height-style="background-color: red; height: 10px; width: 100px">
      </td>
    </tr>
</table>

<br />

<table>
      <td>
        <h1 style="color: #e60000; mso-line-height-rule:exactly;">Tyler Pulse</h1>
        <p><span style="color: #e60000; font-weight: bold">P: </span>816-694-9539</p>
        <p><span style="color: #e60000; font-weight: bold">A: </span>1048 N Monroe Ave, Kansas City, MO 64120</p>
        <p><span style="color: #e60000; font-weight: bold">W: </span>www.pulselogistics.com</p>
      </td>
</table>

<br />

<table style="border: solid black 2px">
      <tr>
        <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:black; line-height:24px; font-weight: bold; letter-spacing: 7px;">
            <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:black; line-height:39px; font-weight: bold; letter-spacing: 7px;">SERVICES</span>
            </td>
        </tr>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" bgcolor="#e60000">
          <tbody>
          <tr>
            <td>
              <table border="0" cellpadding="0" cellspacing="0" width="150">
                <tbody>
                  <tr>
                    <th>
                      <a href="http://www.example.com" 
                     style="word-wrap:normal;padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: white;background: #e60000;border: 1px solid #e60000;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;border: solid black 2px" class="button_link">Truckload</a>
                    </th>
                  <th>
                     <a href="http://www.example.com" 
                    style="word-wrap:normal;padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #e60000;border: 1px solid #e60000;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px; border: solid black 2px" class="button_link">LTL
                    </a>
                  </th>

                  <th>
                      <a href="http://www.example.com" 
                    style="word-wrap:normal;padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #e60000;border: 1px solid #e60000;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;border: solid black 2px" class="button_link">Warehousing
                    </a>
                  </th>

                  <th>
                   <a href="http://www.example.com" 
                    style="word-wrap:normal;padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #e60000;border: 1px solid #e60000;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;border: solid black 2px" class="button_link">Brokerage
                    </a>
                  </th>

                </tr>
              </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" style="font-size: 10px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

任何人都知道为什么要这么做吗？我是否缺少有关跨平台媒体查询的明显内容？

Apple Mail上的HTML渲染问题

0 个答案: