Блог

Главная - Вопросы по программированию - Как предотвратить интеллектуальную подсветку на мобильных почтовых клиентах? (Перспективы)

Как предотвратить интеллектуальную подсветку на мобильных почтовых клиентах? (Перспективы)

#css #outlook #html-email #mjml

Вопрос:

Я отправил тестовое электронное письмо в Outlook и открыл его в приложении Outlook для iOS, и стиль текста по умолчанию для дат/времени имеет свой собственный цвет.

пример

(Бело-серая часть там только для того, чтобы скрыть текст, вы можете увидеть текст подчеркивания зеленым цветом (это дата и время).

Приложения не допускают отладки, поэтому трудно сказать, к какому классу это могло быть применено к отображаемому HTML.

Как предотвратить такое поведение и определить текст по цвету в CSS?

Примечание: это HTML, созданный с помощью MJML. Транспилированный HTML для этого абзаца выглядит следующим образом:

 lt;trgt;  lt;td align="center" style="font-size:0px; word-break:break-word"gt;  lt;div style="font-family:helvetica; font-size:10px;"gt;  TEXT WITH DATE  lt;/divgt;  lt;/tdgt; lt;/trgt;

text-decoration: none работает для удаления стиля подчеркивания, но цвет не меняется ( color: white ) — с или без !important

Комментарии:

1. text-decoration-none или text-decoration: none; ?

2. @fxtrot хорошая мысль. Я исправляю опечатку в вопросе (я проверил код, и он :none уже был).

3. но была еще одна опечатка, которая вызвала проблему с анализом. text-decoration: none работает, но цвет не меняется ( color: white )

Ответ №1:

Решение, позволяющее избежать автоматической привязки даты/времени на iPhone:

Добавление:

  • amp;#8203; (Символ пробела нулевой ширины) между частями текста даты/времени
  • nbsp; (Неразрывное пространство) для пробелов между

Пример:

  • Дата (С умной связью/выделением): 1 ноября 10:15
  • Несвязанная дата (БЕЗ интеллектуальной привязки/выделения) amp;#8203; : amp;#8203; amp;nbsp;amp;#8203; 1 ноября amp;nbsp; 10 amp;#8203; : amp;#8203; 15

Ответ №2:

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

Чтобы решить эту проблему, вы можете обернуть эту копию с помощью встроенного стиля, чтобы, когда эти устройства свяжут эту копию, для нее был задан стиль. Смартфоны автоматически добавят часть href.

Пример:

 lt;a style="color:#FFFFFF;text-decoration:none;"gt;  November 13, 2021 lt;/agt;
Метки: