Подтвердить что ты не робот

Дилемма цветности электронной почты HTML

Я разработал письмо в формате HTML и у меня возникают следующие проблемы: во-первых, весь мой дизайн основан на синем цвете, поэтому любой синий текст не будет читаем читателем/пользователем, текст должен быть белым. GMAIL автоматически окрашивает номера телефонов и ссылки в синий цвет, но основной проблемой является Microsoft Outlook OWA.

Чтобы исправить номер телефона и раскраску ссылок в GMAIL, я сделал следующее:

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

Это прекрасно работает для GMAIL и везде, НО, как я уже говорил, большая часть моего клиента использует Outlook или MS OWA (Outlook Web Application).

OWA игнорирует цвет, который я установил в своем встроенном стиле, и делает ссылку по умолчанию синим; это происходит только при предварительном просмотре электронного письма. Если вы действительно откроете письмо, все стили будут активны.

Моя дилемма в том, что мне делать? Я уже потерял надежду, но это мое последнее средство. Есть ли способ переопределить цвет ссылки для Outlook OWA? Я использовал! ВАЖНО, тег FONT, ГНЕЗД 5 до степени.

Проблема здесь не в Outlook, а в OWA.

Вот скриншот, когда я проверяю элемент в Chrome:

Screenshot of Google Chrome Developer Panel

А вот и ФФ:

enter image description here

Есть идеи?

Пожалуйста!

4b9b3361

ОТВЕТЫ

Ответ 1

Вы добьетесь успеха, включив декларацию <font>, которая устарела в современном HTML, хотя некоторые версии OWA по-прежнему уважают ее:

<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>

Ответ 2

Цвета ссылок Outlook Web App (OWA) меняются от встроенных стилей. Я потратил несколько часов, пытаясь изменить/исправить цвета ссылок в OWA, где он удаляет встроенные стили для шаблонов электронной почты, которые я создаю. Я пробовал различные методы с + тегами без успеха. Наконец нашел что-то, что работает:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

Изменено:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

Кажется, все до сих пор.

Дальнейшее тестирование. Я немного положил цвет на <td style="color:#FFFFF6;">, затем правильный цвет на <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

Ответ 3

Известная ошибка с Outlook заключается в том, что если тег привязки не содержит допустимого URL-адреса, то стиль указанного тега будет проигнорирован.

Пристрастие к добавлению! важно также будет работать против вас в этом случае, потому что Outlook полностью игнорирует любые теги, суффиксные с важными.

Поместите URL-адрес в свой якорный тэг или оберните текст тегом span внутри якоря и разместите там свой стиль.

Ответ 4

Я смог исправить это, поставив таблицу внутри тега a.

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>

Ответ 5

Цифры. Просто, когда мы привыкли к тому, что не можем использовать интересные новые трюки для электронной почты, потому что Outlook их не поддерживает, Microsoft бросает OWA на нас с целым множеством новых ошибок.

Мы обошли его ужасный стиль ссылок, применив ссылку display:inline-block к ссылке. Это, по крайней мере, избавляет от подчеркивания. Понятия не имею почему.

Мы столкнулись с другой ошибкой при попытке стирать наши ссылки того же цвета, что и родительский элемент. По какой-то причине изменение цвета родительского элемента. Изменение его одним символом вверх или вниз обычно дает вам довольно близкий цвет.

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>

Ответ 6

Я использовал следующее, и он отлично работал в Outlook 2007, 2010, 2013 и Outlook.com. Я скоро проверю с OWA.

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>

Ответ 7

OWA фактически лишает все стили a-тега, в том числе теги span-tag, которые вы включили. Вы можете добавлять стили в головную часть, но снова OWA игнорирует это для гиперссылок. Я добавил стиль для a: link, a: посетил в голове тот же цвет, что и в теге a, и в том числе span-tag. Результат? Мой ссылочный текст окрашен, но подчеркивание по-прежнему является синим по умолчанию. Ключ: нет подсказки для меня.

Ответ 8

При отправке html-писем лучше всего придерживаться старых HTML3 и HTML4. Клиенты электронной почты не очень хорошо работают с CSS2 и выше. Встроенные CSS работают намного лучше.

Вместо:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a>

Кстати, у вас есть синтаксические ошибки в этой строке, после каждого объявления css вам нужно:

Исправлено:

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a>

Попробуйте следующее:

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

Не забудьте указать версию HTML в DOCTYPE.

Я нашел себя работающим в обеих сторонах этой ситуации. Я работал над веб-почтовым клиентом, используя PHP с IMAP, мне пришлось снимать электронные письма в формате HTML из-за того, что они нарушили не только макет приложения, но и предполагаемое поведение кнопок и форм. Как? вы можете спросить. С электронной почтой клиент это, вероятно, не будет проблемой, но с загрузкой почтового клиента в Интернете внешние файлы css/js могут привести к очень большому количеству потенциальных ловушек и неприятные ошибки.

В другой раз я работал над приглашениями на свадьбу, отправленными по электронным письмам HTMl, Количество встроенных css, которые нам нужно было сделать, было смешным. Чтобы он работал над вами, использовать в основном HTML3 и, возможно, немного HTML4, но не слишком много.

Я рекомендую вам поэкспериментировать с таблицами и устаревшим HTML3 встроенным css.

Ответ 9

Попробуйте добавить класс my-link к каждой соответствующей ссылке и следующий CSS в тэге style:

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

Это обычно охватывает вещи для меня. Если это не удается, здесь есть более тяжелая версия этого кода:

.my-link a,
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;
}

источник

Ответ 10

Я видел эту тему и пробовал варианты выше. TD-хак работал с изменением шестнадцатеричного кода, но я просто наткнулся на приятное решение, если кто-то хотел бы попробовать:

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

Настройка DIV на текстовое оформление NONE поддерживалась OWA. Меня лично попросили снять подчеркивание, поэтому для моего дела это идеально.

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

Ответ 11

Этот вопрос по-прежнему актуальен на сегодняшний день 21-12-2017. У меня не было проблем с моим кодом в Outlook, Gmail, но не в Outlook Web App. Я должен был использовать этот устаревший тег для его решения.

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

Было странно, что стиль внутри гиперссылки НЕ будет работать для Outlook Web App (OWA), поэтому добавление <font color="#ff6600 !important;"> сработало! Странно, но это то, как Microsoft хочет нас дразнить!

Ответ 12

<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>

это сработало для меня! Обязательно используйте <strong>, я пробовал его с другими тегами, но это не сработало.

Ответ 13

**

PSEUDO CSS ПОДДЕРЖИВАЕТСЯ (2007, 2010, 2016, 2017 и другие)

Это как взломать, потому что он не поддерживает.

<a href="#" target="_blank" style="font-size:20px;">
   <strong style="color:#ffffff;">@Model.TelephoneTextHtml</strong>
</a>