Запретить изменение стиля Outlook (Web) в уличном адресе

#html #html-email #email-templates #outlook-web-app

#HTML #html-электронная почта #электронная почта-шаблоны #outlook-веб-приложение

Вопрос:

Я работаю с базовым шаблоном электронной почты в формате HTML. В конце сообщения указывается уличный адрес.

Когда я открываю электронное письмо в Outlook web; он определяет адрес и преобразует его в ссылку на карту Bing.

Есть ли способ сохранить заданные мной стили?

 <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    123 E. Main St. SomeTown, USA 12345-6789
</p>
  

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

1. Я не думаю, что вы можете отключить это со стороны электронной почты. Однако вы можете отключить плагин Bing на своей стороне. Смотрите здесь .

2. @BramVanroy это то, чего я боялся: P но я хотел запустить StackOverflow, чтобы посмотреть, есть ли какое-то волшебное решение, которое я, возможно, пропустил. спасибо за подтверждение.

3. Возможно, я просто не знаю об этом. Возможно, кто-то другой сможет предоставить вам более обнадеживающую информацию. 🙂

Ответ №1:

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

  1. Вы можете использовать нулевую ширину без объединения amp;zwnj;
  2. Используйте CSS, чтобы он выглядел как обычный текст
  3. Пользовательские мета-теги (для iOS)

Gmail:

Вариант 1:

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

 .address{color:#000001; text-decoration:none;}  
     <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
        <span class="address">123 E. Main St. SomeTown, USA 12345-6789</span>
    </p>  

Причина в том, что Gmail добавляет CSS, который окрашивает href

 .ii a[href] { color: #15c; }
  

Возможно, вы также сможете перезаписать это с помощью вашего CSS (попробуйте).

Вариант 2:

Вы можете использовать CSS для перезаписи всех стилей ссылок, заставляя их наследовать стиль от родительского.

 u   #body a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}  
 <body id="body">
</body>  

iOS:

Вариант 1:

Используйте мета-тег для отключения ссылок

 <meta content="telephone=no" name="format-detection">
  

Вариант 2:

Используйте нулевую ширину-без объединения ( amp;zwnj; )

 <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    1amp;zwnj;2amp;zwnj;3 E. Main St. SomeTown, USA 12345-6789
</p>
  

Вариант 3:

Изменение схемы URL-адресов tel (также работает для Android)

 a[href^=tel]{ color:#000; text-decoration:none;}
  

Вариант 4:

Изменение стиля селектора детектора данных почты

 a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}  
 <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    123 E. Main St. SomeTown, USA 12345-6789
</p>  

Надеюсь, это поможет ответить на ваш вопрос.

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

1. Спасибо за этот очень подробный ответ 🙂