Сотрите синюю рамку на изображении в HTML письме - PullRequest
Новая
       11

Сотрите синюю рамку на изображении в HTML письме

3 голосов
/ 27 июля 2011

Я пытаюсь отправить электронное письмо в формате HTML, и у меня есть этот фрагмент кода: 

<a href="#">UP &nbsp;;<img src="arrow.png" /></a></div>

Но вокруг моего изображения просто синяя рамка.Как я могу избавиться от этого.Спасибо.

Ответы [ 8 ]

13 голосов
/ 27 июля 2011

К сожалению, лучшее решение - использовать атрибут устаревший border, поскольку не все читатели электронной почты анализируют / применяют CSS ... как отдельный раздел стилей, отдельный лист или встроенный в HTML,Если у вас гарантированная аудитория (все используют одно и то же средство просмотра электронной почты), то во всех случаях используйте CSS, если можете. 

<a href="#">UP &nbsp;;<img src="arrow.png" border="0" /></a></div>

Для тестирования вот простой документ HTML, который должен показать все предлагаемые решения: 

<html>
<head>
    <title>IMG border example</title>
    <style>.rion a img {border:0 none;}</style>
</head>
<body>
    <div>1) Default: 
      <a href="#">UP &nbsp;;<img src="arrow.png" /></a></div>
    <div>2) Img border 1: 
      <a href="#">UP &nbsp;;<img src="arrow.png" border="1" /></a></div>
    <div>3) Img border 0: 
      <a href="#">UP &nbsp;;<img src="arrow.png" border="0" /></a></div>
    <div>4) A style border none: 
      <a href="#" style="border:none">UP &nbsp;;<img src="arrow.png" /></a></div>
    <div>5) Img style border none: 
      <a href="#" >UP &nbsp;;<img src="arrow.png" style="border:none" /></a></div>
    <div class="rion">6) Stylesheet a img style border none: 
      <a href="#" >UP &nbsp;;<img src="arrow.png" /></a></div>
</body>
</html>

В моем браузере (Firefox) 1,2,4 показывают границы (граница по умолчанию на 1,4 толще), а 3,5,6 - нет ... однако 5& 6 полагаются на то, что почтовый клиент может анализировать CSS, в частности, 6 может стать очень хитрым с клиентами веб-почты (которые возятся с классами стилей на базовых элементах, потому что у них есть собственный CSS).

5 голосов
/ 27 июля 2011

вы пробовали что-то вроде этого: 

<a href="#">UP &nbsp;<img src="arrow.png" style="border:none"></a>

?

4 голосов
/ 27 июля 2011

Установка свойства border: 0 none; CSS должна исправить это, если вы хотите, чтобы это происходило на всех изображениях, обернутых в ссылки, вы можете использовать его следующим образом: 

a img 
{
    border: 0 none;
}

Для использования в электронном письме вам может потребоваться включить блок стиля в фактическое электронное письмо: 

<style type='text/css'>
a img
{
    border: 0 none;
}
</style>

jsFiddle Пример

1 голос
/ 10 апреля 2012

Этому вопросу несколько месяцев, но я оказался здесь с тем же вопросом, так что, надеюсь, это поможет кому-то сэкономить время, которое я потратил впустую.

У тд есть цвет фона этого неонового синего, и по умолчанию есть немного отступов.

Я только что ввел тд с ... 

style="background:none;"

Я знал все о настройках стиля границы, и у меня не было заданного по умолчанию фона td в почтовых клиентах, которые я ранее тестировал, но он продолжал появляться в gmail.

1 голос
/ 27 июля 2011

Чтобы быть в безопасности, не указывайте границы в обоих тегах. 

<a href="#" style="border: 0;">UP &nbsp; <img src="arrow.png" style="border: 0;"></a>
1 голос
/ 27 июля 2011

Ваше изображение внутри тега ссылки (<a>). Синяя рамка вызвана стилем ссылки по умолчанию. Чтобы исправить эту перезапись стилей CSS для ссылки, установите для свойства border значение 0: 

<a href="#" style="border:none">UP &nbsp;<img src="arrow.png" ></a>
0 голосов
/ 02 августа 2014

Добавление style="background:none;" к td или добавление <style>a img {border:0 none;}</style> работает для меня.

0 голосов
/ 27 июля 2011

Посмотрите, работает ли это: 

<a href="#">UP &nbsp;<img src="arrow.png" style="border: 0 !important;" border="0" /></a>

Пожалуйста, дайте мне знать, если это работает.

...