Question

网络上相互关联的人们，
对于我的角落，我在Firefox上遇到了问题。我认为史前问题是通过我的firefox 3.6.15解决的，它的stil并没有绕过图像。在IE 9测试版以及Safari和Chrome中也能很好地工作，但是在我的Win 7 64位上，角落显得笔直的完美矩形，没有任何在FF上的圆角。

img#thmb { /* thumbnails */
    width:  200px;
    height: 200px;

    border-radius:         8px;
    -moz-border-radius:    8px;
    -webkit-border-radius: 8px;
}

我做错了什么导致圆角正确地在我的所有测试浏览器上工作，除了我唯一喜欢的浏览器.... FireFox。感谢提示和洞察力修复代码。

Answer 1

由于Gecko引擎中<img>标记的实现方式，Firefox目前不支持border-radius标记上的<img>（截至3.x分支，Gecko 1.9。 x）的

这是一个已知的错误。

然而，在Firefox 4（Gecko 2）中，圆角现在剪辑内容和图像（如果未设置overflow : visible）。 [source]

这个bug需要重大引擎重写，这是Mozilla团队在Firefox 4中所做的。

Answer 2

对于所有浏览器兼容性，您可以为此

应用Jquery

下载jquery https://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09
在您的html代码中应用jquery.js和corner.js
在$（document）.ready（）函数

代码看起来像这样

<html>
<head>
<script type="text/javascript" src="/jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<style type="text/css">
round_corner { background: #666666; border:1px solid #000000; width:200px; height:150px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(.round_corner).corner()
});
</script>
</head>
<body>
<div id="my_div" class="round_corner"></div>
</body>
</html>

对于演示，您可以访问http://www.malsup.com/jquery/corner/

Answer 3

要在旧版Firefox中获取图像的圆角边框，您需要在<img>和背景颜色中添加一些填充。它可能是丑陋的，取决于你的设计是什么，它们基本上只是围绕包裹图像的边界延伸，但在简单的CSS中它是最简单的方法。

FireFox 3.6.15+中的图像上的圆角仍然不起作用？

3 个答案: