去除img边框答案

【问题标题】：removing img border去除img边框
【发布时间】：2011-09-23 18:56:07
【问题描述】：

img 边框有问题。我对所有图像都使用以下代码，但边框不会消失。谁能告诉我去除img边框的正确方法？

   <div class="mosaic-overlay">
   <img class="cover1"></div>

   .cover1  {width:300px;height:185px;
            float:left;background: url('/img/cover.jpg') 0px 0px; 
            border:0;}

非常感谢。

埃里克

【问题讨论】：

这可能是一个愚蠢的问题，但你为什么要使用带有背景图像而不是源的 img 标签？如果你使用 div 标签，你就不会遇到边框问题了
确保使用/>关闭img标签
@joakim：在 HTML 4 中关闭 img 标记是不必要的（甚至是禁止的），实际上可能会导致旧浏览器出现渲染问题。只有在编写 XHTML 时才关闭 img 标记……坦率地说，你也不应该编写 XHTML——它通常以标记汤的形式结束，因为几乎没有人真正做到正确。

标签： css

【解决方案1】：

当img 元素没有src 属性或src 属性指向不存在的图像时，它是某些浏览器中出现的默认“特殊”边框。

例如，在 IE9 中查看：http://jsfiddle.net/SdbNE/

一种常见的解决方法是将src 设置为blank.gif file：

<img class="cover1" src="blank.gif" />

或者，只使用div 代替？

<div class="cover1"></div>

【讨论】：

【解决方案2】：

将您的 <img> 源设置为透明。

#img {
  width:150px;
  height:auto;
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;
  background-size: cover;
}

&lt;img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" /&gt;

注意 img src 是空白的，没有边框，但 CSS 设置了 background: url()

透明源：data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

信用CSS Tricks

【讨论】：

【解决方案3】：

这是替代文字的边框，试试

img {
  text-indent: -999px;
}

【讨论】：

【解决方案4】：

我使用那个 java 脚本技巧，我用空白图像初始化所有图像源。

onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");

for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}

【讨论】：