Неправильное отображение html электронной почты в Outlook - PullRequest
Новая
       30

Неправильное отображение html электронной почты в Outlook

0 голосов
/ 13 января 2019

Я создал HTML-сообщение со следующим кодом: 

<!DOCTYPE html>
<html style="margin:0px;padding:0px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body style="margin:0px;padding:0px;">

<div style="background-color:orange;max-width:600px;height:180px;margin-left:auto;margin-right:auto;">

<img src="http://placehold.jp/500x710.png" style="height:180px;width:127px;display:block;border:0;float:right;margin:0px;padding:0px;">

<p style="font-size:40px;padding-left:10px;margin-top:0px;padding-top:40px;">This is my important<br>html test</p>

</div>

</body>
</html>

Я также протестировал этот код с Outlook 2016 (Win 7) и получаю неожиданный результат.

В Outlook 2016 (Win 7) HTML отображается так:

enter image description here

вместо ожидаемого, как это:

enter image description here

Это известная проблема Outlook? Как я могу это исправить?

Использование изображения с разрешением 127x180 приводит к тому же результату, только изображение меньше.

1 Ответ

0 голосов
/ 13 января 2019
  • <div> проблематично в Outlook. Это не очень хорошо работает, и лучше избегать этого.
  • max-width игнорируется Outlook.
  • padding-top игнорируется Outlook.
  • Outlook игнорирует width и height в таблице стилей. Вместо этого используйте <img width="180" />.

Это работает последовательно для каждого почтового клиента. Это может быть не тот способ, которым я буду кодировать электронное письмо, я бы предпочел поместить изображение и текст в их собственные <td> для лучшей манипуляции, но на основе вашего важного html-теста я хотел продемонстрировать способ заставить все работать. 

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  <tr>
    <td valign="middle" style="padding: 20px; background-color:orange;">
      <img src="http://placehold.jp/500x710.png" width="127" height="180" align="right"   style="display:block;">
      <p style="font-size: 40px; padding-left: 10px; margin-top: 0px;">This is my important<br>html test</p>
    </td>
  </tr>
</table>

Удачи.

...