HTML-адрес электронной почты в Gmail - атрибут стиля CSS удален

18

Я работаю над электронным письмом HTML, и я использую Ответственные шаблоны электронной почты MailChimp в сочетании с их Инструмент CSS inliner . По большей части, электронная почта отлично смотрится на множестве почтовых клиентов, но в Gmail вещи ужасно искажены.

Если я использую параметр «Показать оригинал» Gmail в раскрывающемся меню рядом со стрелкой ответа, исходный HTML отличается от того, что фактически отображается в почтовом клиенте. Я могу подтвердить это, проверив элемент с помощью инструментов разработчика. Это происходит на рабочем столе и на мобильных устройствах; клиент электронной почты удаляет встроенные атрибуты стиля из элементов.

Кажется, что одним из критериев удаления атрибута style является то, что элемент также содержит класс. Может ли кто-нибудь подтвердить это? Кроме того, он, как представляется, удаляет все атрибуты стиля из табличного тега независимо. Может ли кто-нибудь подтвердить это также?

Каковы обходные пути для этого?

Скриншоты электронной почты с источником в Gmail и Yahoo, приведенные ниже.

Снимок экрана электронной почты в Gmail с источником, отображаемым с помощью инструментов разработчика Chrome

Снимок экрана электронной почты в Yahoo с источником, отображаемым с помощью инструментов разработчика Chrome

    
задан Matty B 11.07.2013 в 22:01
источник

5 ответов

19

Как человек, который регулярно координирует электронные письма для маркетинговых кампаний на моей работе, я чувствую вашу боль. Gmail, наряду со многими другими почтовыми клиентами, может быть немного напуган для кодирования. Во-первых, он удаляет любой CSS, который находится вне тела. Поэтому использование таких вещей, как медиа-запросы и стили уровня документа, не работает. Лучшим советом, который я могу вам дать, является ручной код вашего встроенного CSS и старайтесь избегать любых фантазий. Фактически, если вы можете использовать атрибут HTML для выполнения своего стиля, используйте это вместо любого CSS. Примером может быть bgcolor вместо background-color.

Вот статья , связанная с вашей конкретной проблемой I найденный. Удачи.     

ответ дан Matt Whitehead 12.07.2013 в 04:56
источник
  • Думаю, что я поделился бы этим отзывчивым шаблоном, который был выдающимся для моего использования. Он работает почти в каждом почтовом клиенте, включая настольные версии Outlook (которые Zurb не поддерживает). Надеюсь, что это поможет кому-то еще по электронной почте: emailonacid.com/blog/details/C13/... –  Matty B 18.07.2013 в 18:26
  • Когда я его протестировал, он не работал на всех клиентах. У них была проблема с падением таблиц, надеюсь, они исправили это. –  Eoin 24.03.2016 в 14:02
4

Для gmail существует множество рабочих мест. Gmail - это довольно шутник, когда дело доходит до вашего стиля, так как он лишит все, что не нравится вам полностью из вашей электронной почты.

Вот несколько советов:

Gmail добавляет пробел между изображениями или растягивает размер его контейнера td: вы можете исправить это, указав на изображениях стиль="display: block" (убедитесь, что ваш TD имеет ту же ширину и / или высоту, что и ваш изображение).

Gmail отображает черные ссылки как синие ссылки: Да, это уродливо. Используйте # 000001 вместо # 000000.

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

Пример: <a style="color:#000001; text-decoration:none;>555 555-5555</a> . Это заставит вас стыдиться вашего кода, но это эффективный маленький взлом.

    
ответ дан R Lacorne 31.07.2013 в 20:24
источник
4

Я только что проверил: Gmail удаляет атрибут встроенного стиля, если вы не помещаете пробелы между ; , , и : chars

это прекрасно работает:

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>

, но одно и то же правило будет удалено, если вы не используете пробелы; если вы пишете это:

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>

вы получите этот результат на клиенте Gmail:

<span>text</span>

ИЗМЕНИТЬ

В дополнение к этому поведению я заметил, что Gmail имеет тенденцию выделять встроенный стиль, если вы объявляете font-family внутри вложенного <table> или <td> , я все еще не уверен, что такое общий правило его препроцессора, я проверил Google, но я не могу найти официальную документацию о составлении html-почты для Gmail.

    
ответ дан pastorello 26.06.2016 в 19:36
источник
2

Просто подумал, что добавлю это в микс. Я столкнулся с этой проблемой, а когда посмотрел на исходный источник, я понял, что 8-битная кодировка разделяет строки в нечетных местах из-за предела 1000 символов, поэтому я попал в контент следующим образом:

<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
 le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">

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

В php я сделал $html = chunk_split(base64_encode($html)) , а затем установил Content-Transfer-Encoding: base64 . Теперь gmail любит меня.

    
ответ дан billynoah 30.11.2015 в 09:43
источник
1

Использование селекторов CSS - это еще один способ обхода, который я смог использовать. В моем примере я пытаюсь отформатировать HTML-таблицу. Я обнаружил, что gmail удалил все атрибуты ID и CLASS, что делает мой CSS бесполезным.

После некоторого расследования я заметил, что gmail не удаляет мой атрибут title. Поэтому я создал правило CSS с помощью селектора заголовков. Это выглядит нормально:

[title~=myTitle] {background: black; color: white;}

Я не думаю, что это лучшая практика, но я думал, что буду упоминать об этом.

    
ответ дан ScottyG 19.12.2013 в 17:28
источник
  • Не могу заставить это работать. Я также попробовал его с атрибутом Lang, поскольку атрибут title отображает небольшую подсказку. Кажется, что Gmail удаляет [title ~ = myTitle] {background: black; color: white;} из моего css, но приведенный ниже код показывает, но просто не стиляет мой элемент. [title ~ = myTitle] {фон: черный; белый цвет;} –  ltjfansite 28.04.2015 в 18:22
  • Каково название вашего элемента? Причина, если вы используете правило CSS точно так же, как у меня есть, ваш заголовок элемента должен быть title="myTitle" –  ScottyG 28.04.2015 в 23:24
  • Я изменил его на «контейнер», чтобы соответствовать атрибуту title. –  ltjfansite 29.04.2015 в 09:31
  • Где в вашем html-письме ваше правило CSS? –  ScottyG 30.04.2015 в 00:22