Я разработал письмо в формате 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:
А вот и ФФ:
Есть идеи?
Пожалуйста!
Вы добьетесь успеха, включив декларацию <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>
Цвета ссылок 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;">
Известная ошибка с Outlook заключается в том, что если тег привязки не содержит допустимого URL-адреса, то стиль указанного тега будет проигнорирован.
Пристрастие к добавлению! важно также будет работать против вас в этом случае, потому что Outlook полностью игнорирует любые теги, суффиксные с важными.
Поместите URL-адрес в свой якорный тэг или оберните текст тегом span внутри якоря и разместите там свой стиль.
Я смог исправить это, поставив таблицу внутри тега a.
<a href="">
<table>
<tr>
<td style="color: #FFFFFF">Link text here</td>
</tr>
</table>
</a>
Цифры. Просто, когда мы привыкли к тому, что не можем использовать интересные новые трюки для электронной почты, потому что Outlook их не поддерживает, Microsoft бросает OWA на нас с целым множеством новых ошибок.
Мы обошли его ужасный стиль ссылок, применив ссылку display:inline-block к ссылке. Это, по крайней мере, избавляет от подчеркивания. Понятия не имею почему.
Мы столкнулись с другой ошибкой при попытке стирать наши ссылки того же цвета, что и родительский элемент. По какой-то причине изменение цвета родительского элемента. Изменение его одним символом вверх или вниз обычно дает вам довольно близкий цвет.
<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>
Я использовал следующее, и он отлично работал в 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>
OWA фактически лишает все стили a-тега, в том числе теги span-tag, которые вы включили. Вы можете добавлять стили в головную часть, но снова OWA игнорирует это для гиперссылок. Я добавил стиль для a: link, a: посетил в голове тот же цвет, что и в теге a, и в том числе span-tag. Результат? Мой ссылочный текст окрашен, но подчеркивание по-прежнему является синим по умолчанию. Ключ: нет подсказки для меня.
При отправке 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.
Попробуйте добавить класс 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;
}
Я видел эту тему и пробовал варианты выше. 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. Меня лично попросили снять подчеркивание, поэтому для моего дела это идеально.
Я надеюсь, что люди найдут это полезным. Спасибо всем, кто добавил их решения.
Этот вопрос по-прежнему актуальен на сегодняшний день 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 хочет нас дразнить!
<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>
это сработало для меня! Обязательно используйте <strong>, я пробовал его с другими тегами, но это не сработало.
**
<a href="#" target="_blank" style="font-size:20px;">
<strong style="color:#ffffff;">@Model.TelephoneTextHtml</strong>
</a>