Question

我正在尝试发送HTML电子邮件，我有这段代码：

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

但是我的图像周围只有一个蓝色边框。我怎么能摆脱它。感谢。

Answer 1

不幸的是，最好的解决方案是使用deprecated 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＆amp; 6依赖于能够解析CSS的电子邮件客户端，特别是6可以使用webmail客户端变得非常狡猾（因为它们有自己的CSS，因此基本元素上的样式类很乱）。

Answer 2

你试过这样的事吗：

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

Answer 3

设置border: 0 none; CSS属性应该解决这个问题，如果你希望它发生在链接中包含的所有图像上，你可以这样使用它：

a img 
{
    border: 0 none;
}

要在电子邮件中使用，您可能必须在实际的电子邮件中包含样式块：

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

jsFiddle Example

Answer 4

您的图片位于链接标记内（<a>）。蓝色边框由链接的默认样式引起。要修复此覆盖链接的CSS样式，请将border属性设置为0：

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

Answer 5

为了安全起见，请在两个标签中指定无边框。

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

Answer 6

这个问题已经有几个月了，但我最后还是提出了同样的问题，所以希望这可以节省一些人浪费的时间。

td的背景颜色为霓虹蓝，默认情况下有一点填充。

我只是用...来设计td。

style="background:none;"

我对边框样式默认值一无所知，并且在我之前测试的邮件客户端中没有td背景默认值，但它一直在gmail中弹出。

Answer 7

看看是否有效：

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

如果有效，请告诉我。

Answer 8

将style="background:none;"添加到td或添加<style>a img {border:0 none;}</style>对我有用。

在HTML电子邮件中删除图像上的蓝色边框

8 个答案: