Проблемы с рендерингом HTML в Apple Mail - PullRequest
Новая
       23

Проблемы с рендерингом HTML в Apple Mail

0 голосов
/ 18 марта 2019

В настоящее время я тестирую отзывчивую подпись электронной почты на нескольких платформах электронной почты, используя Litmus. Пока что форматирование выглядит идеально на всех устройствах / платформах. Проблема в том, что когда я на самом деле отправляю электронное письмо из Outlook на устройство Apple и открываю его в Apple Mail, что-то не так с моими таблицами.

В основном

это должно выглядеть так:

enter image description here

(что он делает в 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>

У кого-нибудь есть идеи, почему он это делает? Я что-то упускаю из-за кроссплатформенных медиа-запросов?

...