<td width="110" align="center" valign="top" style="color:#000000;">
<a href="#" onclick="location.href='https://example.com'; return false;" target="_blank"
style="color:#000000; text-decoration:none;">BOOK NOW
</a>
</td>
Я использовал этот код, чтобы создать ссылку в своем HTML-письме. В браузерах и Outlook он работает красиво, но в GMail, Hotmail и ymail он показывает ссылки подчеркнутыми.
Может ли кто-нибудь помочь мне избавиться от этого?
<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>
Outlook вычеркнет стиль с тегом !important, оставив обычный стиль, и не подчеркнет. Тег !important превысит правило по умолчанию для почтовых клиентов в Интернете, поэтому не будет подчеркиваться.
Я вижу, что на это был дан ответ; однако я чувствую, что эта ссылка предоставляет соответствующую информацию о том, какое форматирование поддерживается в разных почтовых клиентах.
http://www.campaignmonitor.com/css/
Стоит отметить, что GMail и Outlook являются двумя из наиболее подходящих для форматирования HTML-сообщений.
Я думаю, что если вы поместите стиль span после тега <a> с помощью text-decoration:none, он будет работать в большинстве браузеров/почтовых клиентов.
Как в:
<a href="" style="text-decoration:underline">
<span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>
Используйте !important в правиле оформления текста.
<a href="#" style="text-decoration:none !important;">BOOK NOW</a>
После полудня, изучая это (и через 2 года после того, как этот вопрос был открыт), я считаю, что нашел исчерпывающий ответ на этот вопрос.
<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>
(Вам нужно свойство text-underline на пролете внутри ссылки и тег шрифта, чтобы отредактировать цвет)
Другой способ обмануть 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, пожалуйста, не могли бы вы помочь мне попробовать все в этом потоке, ничего не работает.
Спасибо
Все клиенты электронной почты настраивают 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>
Чтобы полностью "скрыть" подчеркивание для <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-м <span> - тот, который вам не нужен, ДОЛЖЕН установить столько же, сколько ваш цвет фона. (здесь красный)
Цвет в 2-м <span> - это цвет текста вашей кнопки. (белый здесь)
Я использовал комбинацию, не показывающую ссылки в 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­.­immothekerfinotheker­.­be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>
Надеюсь, это поможет кому-то
Я добавил обе декларации на href, которые работали в приложениях Outlook и Gmail. outlook игнорирует! важно, и Gmail это нуждается. Веб-версии электронной почты работают с обоими /.
text-decoration: none !important; text-decoration: none;
Это полностью зависит от клиента электронной почты, хочет ли он отображать подчеркивание по ссылке или нет. На данный момент стили в теле поддерживаются только:
Используйте text-decoration:none !important; вместо text-decoration:none;, чтобы удостовериться, что вы потеряли подчеркивание.
Здесь, в http://www.campaignmonitor.com/css/, приятно объяснить, что это ограничение! И довольно хороший справочник, чтобы знать все ограничения CSS в почтовых клиентах.
Вы можете сделать "избыточный стиль", и это должно решить проблему. Вы используете тот же стиль, что и у вас, но добавляете его к тому, что находится внутри.
Пример:
<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>
При просмотре электронной почты html попробуйте проверить элемент на этой ссылке и посмотреть, что его переписывает. Используйте этот класс и определите его стиль снова в своем стиле головы и определите текстовое украшение: none! Important;
В моем случае это классы, которые переписывают мой встроенный стиль, поэтому объявили это в начале моего 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;
}
Код, подобный приведенным ниже строкам, работал у меня в веб-клиенте 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>
Я скопировал мою html-страницу и вставил ее в слово. Отредактирована подпись в слове, удаляющем пробелы, в которые помещается подчеркивание, и сделайте мою собственную "прописку", нажимая пробел. Скопировано снова и вставлено в Outlook 2013. Работал хорошо для меня.
Текстовое украшение для меня не работало, тогда я нашел электронное письмо в 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>
Этот работает для меня.
В 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-украшение: none;}' исправил проблемы с подчеркиванием :)
Вы должны написать что-то вроде этого.
<a href="#" style="text-decoration:none;">BOOK NOW</a>
Все, что вам нужно сделать, это:
<a href="" style="text-decoration:#none; letter-spacing: -999px;">
поместите тэг "href" без стилизации перед div/span текста. затем создайте свой стиль в теге div/span.
для самого ограниченного стиля почтового клиента.
<div><a href=""><span style="text-decoration:none">title</span><a/></div>