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

【问题标题】：Erase blue border on image in HTML email删除 HTML 电子邮件中图像上的蓝色边框
【发布时间】：2011-07-27 15:44:41
【问题描述】：

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

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

但是我的图片周围有一个蓝色边框。我怎样才能摆脱它。谢谢。

【问题讨论】：

好的，。伙计们。我遇到了缓存问题。现在可以了。我不知道哪一个是正确的答案，我不打算更多地使用代码，但我会给你所有积极的声誉。谢谢！

标签： html css html-email

【解决方案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 和 6 依赖在能够解析 CSS 的电子邮件客户端上，特别是 6 可能对 webmail 客户端非常狡猾（因为它们有自己的 CSS，所以会在基本元素上弄乱样式类）。

【讨论】：

页面中是否有其他样式可能会被覆盖？图像是否有嵌入边框？ A 元素是否有可能有背景色，而 IMG 有一个边距，所以它看起来像一个边框？

【解决方案2】：

你有没有尝试过这样的事情：

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

?

【讨论】：

【解决方案3】：

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

a img 
{
    border: 0 none;
}

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

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

jsFiddle Example

【讨论】：

！小心，并非所有电子邮件阅读器都会解析或遵循 CSS 属性。
您是否在电子邮件中包含了样式块？这可能会解决这个问题。
@Dbugger 你是如何检查你的电子邮件的？

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

为了更加安全，在两个标签中都不要指定边框。

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

【讨论】：

【解决方案6】：

这个问题已经有几个月的历史了，但我在这里遇到了同样的问题，所以希望这可以节省我浪费的时间。

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

我只是用...设置了 td 的样式

style="background:none;"

我对边框样式默认设置了如指掌，之前测试过的邮件客户端中没有 td 背景默认设置，但它一直在 gmail 中弹出。

【讨论】：

【解决方案7】：

看看这是否有效：

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

请让我知道这是否有效。

【讨论】：

【解决方案8】：

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

【讨论】：