firefox在黑匣子中显示图像

Question

我有2个链接的图像，当我在safari或chrome中打开我的网站时，它们工作正常但是当我用firefox打开它时，图像是黑色的轮廓。

你可以在这里看到：http://cl.ly/3c0G0W1F1T1Y1e3I0K08

html代码是：

<div id="buy"><a href="http://stackoverflow.com"><img {border: none;} src="img/buy.png" /></a></div>

和

<div id="support"><a href="mailto:mail@mail.com"><img {border: none;} src="img/contact.png" /></a></div>

并且css代码是：

#buy {
position: absolute;
width: 153px;
height: 50px;
margin-left: 750px;
margin-top: 370px;
}

和

#support {
width: 200px;
height: 55px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
} d d

问题在哪里？它仍然无效

Answer 1

试试这个CSS属性

a img{border: none;}

Answer 2

我看不出firefox 4和chrome 10之间有任何区别，但您可以尝试更改：

border: 0 none;

为：

border: none;

Answer 3

鉴于屏幕截图，很难对边框的外观给出一个可靠的答案（这可能是一个css问题）。 我的猜测是，此图像周围有一个标签，导致出现此边框。 在a-tag内的图像上将border-width设置为0或none。

在下面添加我的评论，以便我可以格式化它们： 感谢您扩展您的问题。将其添加到样式表中：

#buy a img, #support a img { border: none; }

并从{ border:none; }标记中移除img。

或者保持样式表不变并更改img标记，将{ border: none; }替换为style="border: none"。

我更喜欢第一种选择。将尽可能多的样式放在外部文件中。这样可以保持你的html干净整洁。