Как удалить ссылку, подчеркивающую в моем HTML-письме - PullRequest
Новая
       222

Как удалить ссылку, подчеркивающую в моем HTML-письме

22 голосов
/ 25 января 2012 
<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;">BOOK NOW
    </a>
</td>

Я использовал этот код, чтобы сделать ссылку в своем HTML-письме. В браузерах и Outlook это работает хорошо, но в GMail, Hotmail и ymail ссылки подчеркнуты.

Может кто-нибудь помочь мне избавиться от этого?

Ответы [ 22 ]

0 голосов
/ 12 февраля 2015

Вы можете сделать «избыточное моделирование», и это должно решить проблему. Вы используете тот же стиль, который у вас есть, но добавляете его к элементу, который находится внутри.

Пример: 

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>
0 голосов
/ 14 января 2016

Оформление текста, ни один не работал для меня, тогда я нашел электронное письмо в Outlook, в котором не было строки и проверил код: 

<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>

Это работает для меня.

0 голосов
/ 18 декабря 2015

Я скопировал свою HTML-страницу и вставил в слово.Отредактировал подпись в слове, удалив пробелы, в которых находится подчеркивание, и сделал собственную "пробку", нажимающую пробел.Снова скопировал и вставил в Outlook 2013. У меня все работало нормально.

0 голосов
/ 18 августа 2013

Это полностью зависит от почтового клиента, хочет ли он отображать подчеркивание под ссылкой или нет. На данный момент стили в теле поддерживаются только:

  • Outlook 2007/10/13 +
  • Outlook 2000/03
  • Apple iPhone / iPad
  • Outlook.com
  • Apple Mail 4
  • Yahoo! Mail Beta

http://www.campaignmonitor.com/css/

0 голосов
/ 07 июля 2015

Код, подобный приведенным ниже строкам, работал для меня в веб-клиенте Gmail.В письме появилась черная черта без подчеркивания.Я не использовал вложенный тег span. 

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

Примечание. Gmail удалит все некорректные встроенные стили.Например, у кода, подобного приведенной ниже строке, будут удалены все встроенные стили. 

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>
0 голосов
/ 19 августа 2013

Используйте text-decoration:none !important; вместо text-decoration:none;, чтобы убедиться, что вы "потеряли" подчеркивание.

0 голосов
/ 28 декабря 2018

Все, что вам нужно сделать, это: 

<a href="" style="text-decoration:#none; letter-spacing: -999px;">
0 голосов
/ 19 августа 2013

Здесь, в http://www.campaignmonitor.com/css/, хорошее объяснение, что это ограничено! И очень хорошее руководство, чтобы узнать все ограничения CSS в почтовых клиентах.

0 голосов
/ 21 ноября 2018

В Windows 10 Mail вам может понадобиться добавить их в заголовок HTML: 

<!--[if (mso)|(mso 16)]>
  <style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
  </style>
<![endif]-->

В 'a {text-ornament: none;}' исправлены проблемы с подчеркиванием:)

0 голосов
/ 25 марта 2015

При просмотре html-письма попробуйте проверить элемент этой ссылки и посмотреть, что его перезаписывает. Используйте этот класс и снова определите его в этом стиле в своем стиле головы и определите оформление текста: нет! Важное;

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

Это сработало для меня, надеюсь, оно будет работать и на вашем. 

.ii a[href]{
text-decoration: none !important;
}

#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}   

#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}
Страница:
...