Не могу получить CSS прямо для электронной почты Outlook - PullRequest
0 голосов
/ 16 июня 2020

Я пытаюсь создать сетку из 3 столбцов для шаблона электронной почты, который использует язык жидких шаблонов. Многие пользователи, которые в конечном итоге получат письмо, используют Outlook. Я пытаюсь использовать таблицу для сетки, которая работает нормально, но мне не удается заставить изображения хорошо выглядеть. Что происходит: я либо использую команду CSS, которая не отображается в Outlook, либо она просто ужасно выглядит. Вот что работает, но не отображается в Outlook:

<td>
  <div style="padding: 5px;">
    <img style="width: 100%; height: 150px; object-fit: contain; object-position: center;" src="/images/logo1.png" />
  </div>
</td>

Мне бы очень хотелось помочь превратить это «предложение» во что-то, что будет отображаться для всех почтовых клиентов.

1 Ответ

2 голосов
/ 16 июня 2020

Обычно использование элементов <div> при работе с HTML сообщениями электронной почты - плохая практика. Для получения желаемых результатов вы должны строго использовать макет <table>. Причина этого в том, что многие почтовые клиенты просто не поддерживают ничего другого. Помимо этого, некоторые почтовые клиенты также игнорируют встроенные отступы и стили полей для элементов <img>, а также некоторые другие специфические элементы c. Все действительно зависит от обстоятельств. Практическое правило: если вы используете макет <table>, все, вероятно, в порядке. В любом случае по большей части.

Эта старая статья покрывает некоторые неудобства, связанные с элементом <div> в HTML сообщениях электронной почты.

В качестве альтернативы, проверьте эта статья в Outlook 2016 HTML Советы по электронной почте.

Я бы также настоятельно рекомендовал бы использовать этот жемчужина сообщения, если вы хотите узнать больше о HTML электронных письмах.

...