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

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

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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

Просто подумал, что добавлю это в микс. Я столкнулся с этой проблемой, а когда посмотрел на исходный источник, я понял, что 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 любит меня.

Ответ 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.

Ответ 5

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

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

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

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