-moz-border-radius对firefox中的图像不起作用...为什么? (与css3相关)

时间:2011-04-13 08:06:15

标签: image firefox xhtml css3 rounded-corners

-moz-border-radious对firefox中的图像元素(html)不起作用...为什么? (与css3相关)

我测试了一些方法来解决这个问题,比如为这个图像制作一个容器并改变容器的颜色/没帮助!

感谢关注

最好的问候

1 个答案:

答案 0 :(得分:0)

Firefox 3将前景图像视为位于边框前方。这会产生您所看到的效果。它不会影响任何其他浏览器,包括Firefox 4。

在上述评论中作为重复链接的主题中详细讨论了该问题 - Firefox -moz-border-radius won't crop out image?

最好的方法是使用背景图像而不是前景图像,你想要圆角:

即:<div style='background:url(myimage.jpg);' />代替<img src='myimage.jpg'>

这方面的缺点是背景图像不像前景图像那么灵活 - 即它难以扩展它们等等。但它确实解决了这个问题。

其他选项是为图像本身提供圆角,或者只是忽略它(因为它只会影响Firefox 3;取决于您的用户受影响的数量,以及影响您的设计的程度)。