Outlook 2007 изменяет стили ссылок в электронном письме в формате HTML, чтобы при отправке в Hotmail, Gmail и т. Д. Иметь синее подчеркивание. Есть ли исправления? - PullRequest
Новая
       4

Outlook 2007 изменяет стили ссылок в электронном письме в формате HTML, чтобы при отправке в Hotmail, Gmail и т. Д. Иметь синее подчеркивание. Есть ли исправления?

17 голосов
/ 10 ноября 2010

Я использовал шаблоны электронной почты в формате 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 и отправляю его из своей учетной записи hotmail в другую учетную запись hotmail, это работает отлично. Итак, для меня это проблема Outlook 2007.

Мне удалось проанализировать HTML, который Outlook отправляет получателю горячей почты, и обнаружил, что 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, похоже, устанавливает значения для тега a, но мой встроенный стиль не переписывает то, что Outlook добавляет в электронное письмо.

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

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

Спасибо всем, кто может помочь.

Ответы [ 9 ]

20 голосов
/ 19 сентября 2012

Обновление: этот ответ был верным на момент написания статьи в 2012 году, но, похоже, больше не работает. Оберните текст тегом <span> с атрибутом style.

Вы также должны использовать <font>, чтобы быть очень осторожным.

Например: 

<a style="color:#E3A216; text-decoration:none;">
  <span style="color:#E3A216;">
    <font color="#E3A216">
      Click me
    </font>
  </span>
</a>
5 голосов
/ 02 апреля 2012

Чтобы избавиться от синего в Gmail, просто измените цвет с # 000000 на # 000001. Gmail делает все черные ссылки голубыми.

2 голосов
/ 24 августа 2012

На самом деле, inline-styles - это единственный способ стилизовать ваш текст, но лучший способ - объявить его несколько раз.Использование упомянутого выше 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>

Я добавил дополнительный стиль в head , который применяется вOutlook (но не в Gmail): 

<style type="text/css">
  a, a:link, a:visited { color:#333333; }
</style>
0 голосов
/ 08 мая 2017

У меня был большой беспорядок с этой проблемой, но я нашел хорошее решение.

Допустим, вы хотите сделать ссылку красной, без специальных стилей для ситуации наведения: 

a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}

Если вы пропустите какое-либо из этих 4 утверждений или сделаете это в другом порядке, это может привести к тому, что стилизация вашей ссылки не будет работать. Это работает и в клиенте gmail.

0 голосов
/ 29 августа 2015

Я не помню, где я нашел это решение, но я поместил следующий CSS в <head> моих электронных писем (конечно, в теге <style>. 

/*outlook links visited state fix*/
span.MsoHyperlink { mso-style-priority:99; color:inherit; }
span.MsoHyperlinkFollowed { mso-style-priority:99; color:inherit; }
0 голосов
/ 09 июня 2015

Нет - не использовать теги шрифта. Метка шрифта отрисовывается по-разному от одной комбинации почтового клиента и интернет-браузера к другой. Вы можете проверить это.

  • Firefox-Yahoo
  • Internet Explorer-Yahoo

Изменения в тегах шрифта:

  • Различные высоты линий

  • Разные межсимвольные интервалы между словами

Чтобы избежать этого, всегда используйте <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>

В этом случае outlook игнорирует! Важно, а клиенты веб-почты - нет. Вот почему мы должны повторять одно и то же CSS-объявление дважды и снова на ... пуленепробиваемой технике!

0 голосов
/ 09 апреля 2014

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

0 голосов
/ 01 августа 2012

Вы не должны использовать стили, встроенные или иные, в шаблонах электронной почты.Устаревший код - это порядок дня, а подчеркивание на шрифте избегается благодаря (не) правильному применению объявления font-color вокруг самой ссылки, даже если оно уже находится внутри объявления шрифта для окружающего текста.Пример: 

<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>

Наслаждайтесь.Письма в формате HTML очень отсталые в том смысле, что их нужно создавать, чтобы удовлетворить все почтовые клиенты.

0 голосов
/ 10 ноября 2010

Если ваша проблема так проста, как невозможность переопределить таблицу стилей Outlook, попробуйте декларацию !important со встроенными стилями, например, 

<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a>
...