Mailchimp Outlook Условный CSS не вступает в силу - PullRequest
Новая
       24

Mailchimp Outlook Условный CSS не вступает в силу

0 голосов
/ 06 февраля 2019

Кодирование шаблона электронной почты через Mailchimp, и в то время как он у меня работает для каждого почтового клиента на основе HTML.В почтовом клиенте Outlook на базе Microsoft Word возникают проблемы.Я следовал за документацией Mailchimp , но мне не повезло с тем, что код действительно имеет место.Мы пытаемся настроить таргетинг на все почтовые клиенты Outlook, и в настоящее время я тестирую на Outlook 365. У этого тоже есть проблема.

Вот пример нашего кода, он размещен наконец тела. 

<!--[if gte mso 9]>
<style type="text/css">
  .orange-block {margin: 0px !important;}
  .orange-block {width: 600px !important;}
  .orange-block {padding: 20px !important;}

  .orange-image {margin-left: 30px !important;}

  .templateImage {width: 600px !important;}
  .templateImage {margin: 0px !important;}
  .socialicon {height: 23px !important;}
  .socialicon {width: 23px !important;}
  .socialicon {margin: 10px !important;}
</style>
<![endif]-->

Я действительно старался сделать его простым и понятным.Но ни один из приведенных выше кодов не выполняется.Есть идеи почему?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019 
<!--[if gte mso 9]>
<style type="text/css">
  .orange-block {margin: 0px !important;}
  .orange-block {width: 600px !important;}
  .orange-block {padding: 20px !important;}
  .orange-image {margin-left: 30px !important;}
  .templateImage {width: 600px !important;}
  .templateImage {margin: 0px !important;}
  .socialicon {height: 23px !important;}
  .socialicon {width: 23px !important;}
  .socialicon {margin: 10px !important;}
</style>
<![endif]-->

Outlook 2007-2019 игнорирует классы для ширины изображения, высоты, поля.Примените значения непосредственно к изображениям: 

<img src="" width="600" height="23" class="templateImage" />

Вы можете использовать имя класса для изменения изображения в современных почтовых клиентах.

Outlook игнорирует margin:.Вместо этого попробуйте Margin:.

Outlook 2013-2019 имеет пятнистую поддержку padding.Вы можете применить заполнение к <td style="padding: 20px;"> напрямую, но Outlook будет игнорировать заполнение для изображений и других экземпляров.

Удачи.

0 голосов
/ 06 февраля 2019

Так что у меня пока недостаточно представителей, чтобы оставить комментарий (в противном случае я бы попросил вас там) опубликовать пример вашего HTML.Поэтому, если возможно, сделайте это, чтобы у нас был рабочий фрагмент кода.

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

При этом я бы предложил вам попробовать это 

<!--[if mso]>
<style type="text/css">
.class-name {
  color: red!important;
}
</style>
<![endif]-->

Вставьте его под открывающий тег и измените .class-name на значение в вашей разметке.

Я потратил много временивремя, чтобы узнать, как обслуживать почтовые клиенты Outlook в Windows, и был бы рад помочь, если бы вы могли также предоставить свой HTML.

Кроме того, 9 в приведенном выше фрагменте не будет работать в 365:

См. Это в документах Mailchimp: https://templates.mailchimp.com/development/css/outlook-conditional-css/

Номера версий Outlook Использование номеров версий Microsoft Office позволяет ориентироваться на определенные клиенты Outlook.В приведенном выше примере mso 9 - это Office 2000, что означает, что вы нацеливаетесь на Outlook 2000. Другие номера версий позволяют ориентироваться на другие клиенты, то есть вы можете создавать таблицы стилей, адаптированные к каждой версии Outlook.

Outlook 2000 - версия 9 Outlook 2002 - версия 10 Outlook 2003 - версия 11 Outlook 2007 - версия 12 Outlook 2010 - версия 14 Outlook 2013 - версия 15

...