Question

有许多JQuery插件可以为不支持CSS3的浏览器提供圆角。它们要么不起作用，要么在看到它没有样式的情况下产生难看的效果，然后JS开始并最终使它们四舍五入。

我正在寻找一种解决方案，在可见性之前渲染圆角，寻找无缝或接近无缝的解决方案。

如果将.htc文件与www.css3pie.com一起使用，我到目前为止已达到最佳匹配。仍有延迟（不确定是否可以解决）。

css3pie大约是26k压缩，所有者声称如果你有JQuery，可能会有更少的脚本。（我计划在任何时候都使用JQuery。）

理想情况下，我希望它支持渐变，边框半径和框阴影。目前css3pie完成了我需要的所有这些，除了盒子阴影。如果背景是透明的，它会变得混乱，如下所示：http://github.com/lojjic/PIE/issues#issue/12

我愿意接受IE6中任何这些功能的无效。

我想也许我只是不能吃一块蛋糕而且也吃它。现在，我将坚持使用css3pie.com并忍受恼人的延迟，并且不允许在IE中使用box-shadow。这并不是什么大不了的事，因为IE9想要修复那个 - 交叉手指 -

Answer 1

The CSS3 PIE library为IE6 / 7/8处理了很多事情，包括：

边界半径（圆角）
Box Shadow
边境图片
渐变背景

非常方便。

Answer 2

如果您必须支持IE6的圆角，那么您可以查看Curved Corner.

我会通过条件IE6 CSS文件调用behavior:url(border-radius.htc)。

就个人而言，我会完全忽略IE6中的弯角。

Answer 3

使用jquery圆角插件

http://jquery.malsup.com/corner/

在每个可能的事件中触发插件以确保其加载

<script>
   $(this).corner(); //This will trigger the function as soon as this line loads
   $(document).ready(function() { $(this).corner(); }); //not necessary
   $(window).load(function() { $(this).corner(); });//not necessary
</script>

Answer 4

IMO你不应该关心IE下圆角或阴影等不重要的东西。在每个可能的浏览器下页面应该看起来相同的时间终于消失了。作为开发人员，您负责正确显示页面框架，但 eye-candy 是一项浏览工作。如果某些浏览器不支持某些CSS3元素 - 那么它就是用户的问题。他们使用糟糕的浏览器 - 他们看到糟糕的网站（好吧......也许不是蹩脚但有点丑陋）。

因此，作为Opera用户，我不会在YouTube用户看到YouTube上的按钮上看到漂亮的渐变。但我仍然看到一个漂亮的页面！

换句话说：不关心IE下的这类细节。不关心Opera / Firefox / Safari / Chrome下的这些细节。如果其中一些不支持某些内容 - 如果跨浏览器解决方案需要多个双/三个CSS条目，请保留此项：

box-shadow: 0 0 5px #333;
-moz-box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;

Answer 5

我想你可能会发现这个密切相关的问题很有意思：

Creating rounded corners using CSS

也密切相关，但邀请更多与JQuery相关的回复是：

https://stackoverflow.com/questions/521432/best-jquery-rounded-corners-script

Answer 6

如果你正在寻找非常流畅的圆角并且在所有浏览器中都有效，那么就有简单的javascript叫做curvycorners

只需要在

中包含js文件

在你的html中使用class =四舍五入你想要的地方。

http://www.curvycorners.net/instructions/

IE6-8中的纯CSS圆角（接受JQuery）

6 个答案: