Почему в браузере Firefox, Internet Explorer, Chrome мой шаблон электронной почты отображается правильно, но в программе чтения электронной почты Microsoft Outlook он не работает?

У меня есть шаблон, который я использовал для отправки электронных писем, написанных исключительно вручную с помощью css, а затем я протестировал его в браузере Firefox/InternetExplorer/Chrome. Но когда я отправляю это электронное письмо на компьютер моего босса, так как он всегда является пользователем Microsoft Outlook.

У него всегда ломается расклад, тексты ломаются все проблемы начинаются. Мой вопрос в том, как вы на самом деле пишете тогда? Ни один из веб-браузеров не показывает мой шаблон неправильно.

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

Спасибо


email outlook html-email
person Community    schedule 13.09.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Outlook 2007 — плохой парень. Любая новая или старая намного лучше. В Outlook 2007 многие команды CSS не работают.

Подробнее см. на этой странице: http://www.email-standards.org/.

Тем не менее, попробуйте отправить свою электронную почту на Gmail.com и посмотрите, как она будет отображаться в веб-интерфейсе Gmail. веб-клиенты тоже.

Несколько советов по электронным письмам в формате HTML:

  • Outlook
    • It is good to provide width for Outlook, otherwise the CSS may crash.
    • Outlook не поддерживает padding для <div>s / <p>s, float и других вещей.
  • Gmail
    • For Gmail, you should use inline CSS in preference to defining classes.
    • Gmail на самом деле анализирует CSS, предоставленный вами, и, например, изменяет height на min-height, поэтому использование высоты бесполезно. Однако браузеры не учитывают min-height из <td>, поэтому можно использовать внутренние <div> внутри <td>, чтобы обеспечить применение минимальной высоты.
    • Gmail удаляет фоновые изображения, и обычно во всех почтовых клиентах изображения отображаются по запросу пользователя из соображений безопасности. Поэтому оберните изображения <div> и установите цвет фона и цвет этого внешнего div, а также предоставьте alt (альтернативный текст) для изображения (обратите также внимание, что изображения с пустым src не сохраняют ширину и высоту при рендеринге браузером).
person jakub.g    schedule 14.09.2011

arrow_upward
1
arrow_downward

Outlook использует более старую версию Trident, механизм рендеринга CSS. В зависимости от того, какой Outlook использует ваш босс, тем хуже может быть. Outlook 2010 фактически вернулся к более старой версии Trident из-за того, что Microsoft проиграла антимонопольное дело с ЕС, поэтому любая версия до 2010 года на самом деле выглядит лучше, однако они обе довольно некачественные @ лучшие. вы захотите буквально прекратить разработку с современными html/css и вернуться к старым школьным макетам таблиц. я знаю, это грубо, но вам придется сделать это для электронной почты. лучшие тесты являются нативными, но если у вас нет доступа к обеим версиям (не у многих), вам следует проверить EmailOnAcid.com, они предоставляют множество почтовых клиентов, на которых вы можете протестировать. Constantcontact.com, mailchimp.com и campmonitor.com предлагают больше, чем услуги тестирования, если вам нужно что-то еще.

person albert    schedule 14.09.2011