FireFox 3.6.15+ 中图像的圆角还没工作？

发布于 2024-10-21 22:27:28 字数 448 浏览 0 评论 0原文

人们在网络上紧密相连，
对于我的圆角，我在 Firefox 上遇到了问题。我认为史前问题已经在我的 Firefox 3.6.15 上解决了，但它仍然没有解决图像的问题。在 IE 9 beta、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。感谢您的提示和见解修复代码。

原文

Greatly connected peoples on the web,
For my rounding of corners I have a problem on Firefox . I thought that prehistoric problem was solved byt on my firefox 3.6.15 its stil doesnt round the corner on images. Works all nicely in IE 9 beta and Safari and chrome too, however on my Win 7 64 bit the corners appear straight perfect rectangular without any hint of rounding on FF.

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

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

What am I doing wrong causing round corners to work on all my testing browsers correctly, except my only one favourite browser.... FireFox.
Thanks for hints and insight fix-up code.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

A君 2024-10-28 22:27:28

由于标签在 Gecko 引擎中的实现方式，Firefox 目前不支持上的 border-radius code> 标签（从 3.x 分支开始，Gecko 1.9.x）。

这是一个已知的错误。

但是，在 Firefox 4 (Gecko 2) 中，圆角现在会剪辑内容和图像（如果未设置 overflow :visible）。 [来源]

这个错误需要对主要引擎进行重写，这就是Mozilla 团队正在开发 Firefox 4。

回复收藏 0 原文

陈年往事 2024-10-28 22:27:28

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

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

代码如下所示

<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/角落/

For All browser compatibility you can apply Jquery for this

Download jquery https://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09
Apply jquery.js and corner.js in your html code
Call corner function in $(document).ready() function

Code look like this

<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>

For demo you can visit http://www.malsup.com/jquery/corner/

回复收藏 0 原文