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

Как удалить ссылку, подчеркивающую в моем 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 ]

29 голосов
/ 17 января 2014 
<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>

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

7 голосов
/ 25 января 2012

Я вижу, что на это ответили; однако я считаю, что эта ссылка содержит соответствующую информацию о том, какое форматирование поддерживается в различных почтовых клиентах.

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

Стоит отметить, что GMail и Outlook являются двумя самыми требовательными для форматирования электронной почты в формате HTML.

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

Еще один способ обмануть Gmail (для телефонных номеров): используйте ~ вместо -

404-835-9421 -> 404 ~ 835 ~ 9421

Это спасет вас (или менее опытных пользователей ;-) путешествие по html-полосе.

Я нашел другой способ удалить ссылки в Outlook, который я тестировал до сих пор. если вы создаете пустой класс, например, в вашем css, скажите .blank {}, а затем сделайте следующее со своими ссылками, например: 

<a href="http://www.link.com/"><span class="blank" style="text-decoration:none !important;">Search</span></a>

это сработало для меня, надеюсь, это поможет кому-то, у кого все еще есть проблемы с выделением подчеркивания ссылок в outlook. Если у кого-то есть обходной путь для Gmail, пожалуйста, не могли бы вы помочь мне попробовать все в этой теме, ничего не работает.

Спасибо

3 голосов
/ 13 августа 2013

Используйте !important в правиле оформления текста. 

<a href="#" style="text-decoration:none !important;">BOOK NOW</a>
2 голосов
/ 29 ноября 2012

Я думаю, что если вы добавите стиль span после тега <a> с помощью text-decoration:none, он будет работать в большинстве браузеров / почтовых клиентов.

Как в: 

<a href="" style="text-decoration:underline">
    <span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>
2 голосов
/ 28 августа 2014

После полдня изучения этого (и 2 лет с момента открытия этого вопроса) я считаю, что нашел исчерпывающий ответ на этот вопрос. 

<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>

(Вам нужно свойство text-underline наинтервал внутри ссылки и тег шрифта для редактирования цвета)

1 голос
/ 09 июля 2012

Все почтовые клиенты корректируют HTML и код CSS, который вы предоставляете свои правила:

например: gmail удаляет все, кроме внутреннего HTML тега body.

1. для большинства других клиентов в заголовке может быть тег стиля 

<style type="text/css">
    a {text-decoration: none !important;}
</style>

примечание: не используйте CSS-комментарии, поскольку YAHOO! Почта может вызвать проблемы.

2. для сохранения добавьте тот же код, встроенный в тег A, что и вы, и дополнительный тег span (правила стилей в тегах часто удаляются) 

<a href="" style="text-decoration: none !important;">
    <span style="text-decoration: none !important;">
        text
    </span>
</a>
1 голос
/ 04 февраля 2016

Я использовал комбинацию не показывать ссылки в Google, добавлять ссылки для mso (outlook) и застенчивого тега, чтобы сохранить внешний вид и восприятие моей компании. Некоторый код может быть избыточным (для моей компании внешний вид куда важнее, чем та, которую можно нажимать. (Это было похоже на головоломку, поскольку каждое изменение тормозит что-то другое) 

<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www&shy;.&shy;immothekerfinotheker&shy;.&shy;be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

Надеюсь, это кому-нибудь поможет

1 голос
/ 28 июня 2016

Я добавил обе декларации в href, который работал в приложениях outlook и gmail. outlook игнорирует! важный и gmail нуждается в этом. Веб-версии электронной почты работают с обоими / либо. 

text-decoration: none !important; text-decoration: none;
1 голос
/ 18 октября 2015

Чтобы полностью «скрыть» подчеркивание для <a> как в почтовом приложении, так и в веб-браузере, можно сделать следующий хитрый способ. 

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

  1. Цвет в 1-м <span> естьтот, который вам не нужен, ДОЛЖЕН установить так же, как ваш цвет фона.(красный здесь)

  2. Цвет для 2-го <span> - тот, который используется для текста вашей кнопки.(белый здесь)

Страница:
...