Кнопки Mailchimp плохо отображаются в Gmail с использованием наклона CSS - PullRequest
Новая
       40

Кнопки Mailchimp плохо отображаются в Gmail с использованием наклона CSS

0 голосов
/ 15 января 2020

Я нашел этот ТАК вопрос и ответ, который решил для меня много проблем с получением почтовых шаблонов Mailchimp HTML, которые хорошо отображаются в Gmail: Форматирование Gmail на html шаблон испорчено

Хотя этот ответ решил большинство моих проблем для меня, он также представил новую: мои HTML кнопки теперь очень плохо отображаются в Gmail с включенным встроенным Mailchimp CSS. Ранее они выглядели великолепно в Gmail с отключенным встроенным (хотя куча других вещей были повреждены).

Они хорошо отрисовываются в почте Apple как с включенным, так и без включенного CSS.

Gmail HTML скриншот кнопки

Apple Mail HTML скриншот кнопки

Что можно сделать, чтобы улучшить эти кнопки в Gmail со встроенным CSS?

1 Ответ

0 голосов
/ 17 января 2020

Найдена проблема, и она действительно проста.

Эта строка здесь: 

<td class="mcnButtonContent" style="font-family:Arial, &quot;helvetica neue&quot;:;, helvetica, sans-serif:;font-size:14px;padding:20px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="middle" align="center">

В частности: 

font-family:Arial, &quot;helvetica neue&quot;:;, helvetica, sans-serif:;

Вы объявили точки с запятой в середине объявления шрифта. Затем, когда вы объявляете другой резервный шрифт Helvetica, свойство CSS нарушается, что, в свою очередь, нарушает вывод стилей при рендеринге.

Когда я удалил их и снова протестировал в Litmus, кнопка отрисовалась, как и ожидалось , Я должен также отметить, что это влияло на Outlook.com и Office 365.

По сути, это должно выглядеть так: 

<td class="mcnButtonContent" style="font-family:Arial, 'helvetica neue', helvetica, sans-serif;font-size:14px;padding:20px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="middle" align="center">

Опять же, посмотрите на детали: 

font-family:Arial, 'helvetica neue', helvetica, sans-serif;

На самом деле вы можете использовать &quot; вместо настоящей пунктуации. Это не вызвало никаких проблем, по крайней мере, в этом небольшом тесте.

Надеюсь, это имеет смысл! Дайте мне знать, если нет.

...