Я использую HTML-шаблоны электронной почты, которые я получил от http://www.campaignmonitor.com/templates/ И на каждом примере, который я прошел, когда я отправляю электронное письмо с использованием HTML-шаблона, всем ссылкам присваивается ужасная стандартная синяя подчеркивание. Письма отправляются с использованием Outlook 2007, и когда они просматриваются в Outlook, все в порядке. Однако в Hotmail и Gmail эта синяя подчеркивание сохраняется независимо от цвета текста.
Я пробовал встроенный стиль тега:
<a href="./" style="color: #E3A216; text-decoration: none;">Mauris commodo hendrerit risus</a>
Если я использую тот же HTML-код HTML-кода и отправлю его с моей учетной записи hotmail на другую учетную запись hotmail, она отлично работает. Итак, для меня это проблема Outlook 2007.
Мне удалось проанализировать html, который Outlook отправляет получателю hotmail, и обнаружил, что Outlook прикрепляет таблицу стилей поверх HTML-кода. Это то, что он отправляет:
<style>
.ExternalClass .ecxshape
{;}
</style>
<style>
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal
{margin-bottom:.0001pt;font-size:11.0pt;font-family:'Calibri','sans-serif';}
.ExternalClass a:link, .ExternalClass span.ecxMsoHyperlink
{color:blue;text-decoration:underline;}
.ExternalClass a:visited, .ExternalClass span.ecxMsoHyperlinkFollowed
{color:purple;text-decoration:underline;}
.ExternalClass p.ecxMsoAcetate, .ExternalClass li.ecxMsoAcetate, .ExternalClass div.ecxMsoAcetate
{margin-bottom:.0001pt;font-size:8.0pt;font-family:'Tahoma','sans-serif';}
.ExternalClass span.ecxEmailStyle17
{font-family:'Calibri','sans-serif';color:windowtext;}
.ExternalClass span.ecxBalloonTextChar
{font-family:'Tahoma','sans-serif';}
.ExternalClass .ecxMsoChpDefault
{;}
@page WordSection1
{size:612.0pt 792.0pt;}
.ExternalClass div.ecxWordSection1
{page:WordSection1;}
</style>
.ExternalClass, похоже, устанавливает значения для тега, но мой встроенный стиль не переписывает то, что Outlook добавляет к электронной почте.
Я попытался создать таблицу стилей в разделе главы и даже в разделе тела, но это ничего не делает.
Кто-нибудь знает об этом? Я либо хочу избавиться от подчеркивания, либо даже просто подчеркнуть отображение в цвет, который я указал для ссылок.
Спасибо всем, кто может помочь.
Обновление: этот ответ был верным на момент написания статьи в 2012 году, но, похоже, больше не работает.
Оберните ваш текст тегом <span> с атрибутом style.
Вы также должны использовать <font> чтобы быть очень осторожным.
Например:
<a style="color:#E3A216; text-decoration:none;">
<span style="color:#E3A216;">
<font color="#E3A216">
Click me
</font>
</span>
</a>
Чтобы избавиться от синего в Gmail, просто измените цвет С# 000000 на # 000001. Gmail делает все черные ссылки синими.
На самом деле, встроенные стили - единственный способ стилизовать ваш текст, но лучший способ - объявить его несколько раз. Использование тега FONT, как указано выше, не делает трюк для всех почтовых клиентов.
Правильный способ использования FONT-тега для электронных писем HTML:
<font face="Arial, Helvetica, sans-serif" size="1" color="#333333" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333">Example of styled text.</font>
лучший способ, чтобы стилизовать текст, выполняется следующим образом:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td width="600" bgcolor="#ffffff" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;">
<a href="#" style="color:#333333; text-decoration:underline;"><span style="color:#333333;">Example of styled linktext.</span></a>
</td>
</tr>
</table>
Я помещаю дополнительный стиль в голову, которые применяются в Outlook (но не в Gmail):
<style type="text/css">
a, a:link, a:visited { color:#333333; }
</style>
Если ваша проблема настолько проста, что не может переопределить таблицу стилей Outlook, вы должны попробовать объявление !important с помощью встроенных стилей, например.
<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a>
Нельзя использовать стили, встроенные или другие, в шаблонах электронной почты. Устаревший код - это порядок дня, и подчеркивание шрифта избегается (in), правильно применяя декларацию цвета шрифта вокруг самой ссылки, даже если она уже находится в объявлении шрифта для окружающего текста. Пример:
<font face="Arial, Helvetica, sans-serif" color="#ffffff" size="2">Some non link text here followed by <a href="http://www.yourlink.com" target="_blank"><font color="#ffffff"><u><em>the text for the link here surrounded by the font style specifically for the link</em></u></font></a> irrespective of the text that surrounds it</font>
Enjoy. HTML-письма очень отстают в том, что они должны быть построены для того, чтобы удовлетворить всех клиентов электронной почты.
Известная ошибка в Outlook заключается в том, что если тег привязки не содержит допустимого URL, определяемый стиль будет, вероятно, проигнорирован.
Я не помню, где я нашел это решение, но я поместил следующий CSS-код в <head> моих электронных писем (конечно, внутри <style>.
/*outlook links visited state fix*/
span.MsoHyperlink { mso-style-priority:99; color:inherit; }
span.MsoHyperlinkFollowed { mso-style-priority:99; color:inherit; }
У меня была большая проблема с этой проблемой, но я нашел прекрасное решение.
Предположим, что вы хотите сделать ссылку красной без специального стиля для ситуации наведения:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
Если вы пропустите любой из этих 4-х заявлений или сделаете это в другом порядке, это может привести к тому, что ваш стиль ссылок не будет работать. Он также работает в клиенте gmail.
Нет. Не используйте теги шрифтов. Текст шрифта отличается от одной электронной почты клиент-интернет-браузера сочетание с другим. Вы можете проверить это.
Изменения в тегах шрифтов:
Различные высоты линий
Различие между символьными словами
Чтобы этого избежать, всегда используйте <span style=font-family: or <td style=font-family:..
Также
Исправить для Outlook и других почтовых клиентов:
<a href="#" style="color:#735a29 !important; text-decoration:none !important; "><span style="color:#735a29; text-decoration:none;>LINK
</span></a>
В этом случае внешний вид игнорирует! важно, но веб-клиенты электронной почты этого не делают. Вот почему мы должны повторять одну и ту же декларацию CSS дважды и снова на... пуленепробиваемой технике!