html - 如何从 Chrome 中的图像中删除边框？

Question

我有一个带有图像标签的网络应用程序，该标签具有 css 类，但没有 src 属性。像这样的事情:

<img class="image"/>

css 类仅定义图像的 url 及其大小，但未定义边框属性。问题是图像的白色边框仅在 Chrome 浏览器中呈现(在 Firefox 和 IE11 中工作正常)。我尝试通过 css 规则明确删除它，但到目前为止我还不能。

解决方案是通过 src 属性设置图像的 url，但我有太多从 css 规则获取源的图像。那么，有什么方法可以从CSS中删除白色边框吗？也许这是一个 chrome 错误？

这个问题几天前就发生在我身上。看来它是在最新的 chrome 更新中附带的。

Here you have a jsfiddle to test what I say.

这里直接有 jsfiddle 示例的相同代码片段:

body {
			background-color: brown;
			height: 100%;
			position: absolute;
			width: 100%;			
		}
		
		.image {
			background-image: url("http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png");
			background-repeat: no-repeat;
			background-size: 600px 400px;
			content: '';
			display: inline-block;
			height: 400px;
			padding: 0;
			position: relative;
			top: 5px;
			vertical-align: top;
			width: 600px;
		}

<div>
    <img class="image"/>
</div>

Answer 1

为什么将图像设置为 img 标签的背景？您应该使用 src 属性(必须具有有效的 html)来定义图像 url。

<img class="image" src="http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png"/>

如果由于某种原因无法做到这一点，请考虑使用 div 而不是 img 来达到相同的效果。

<div class="image"></div>