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

【问题标题】：Pure CSS Rounded Corners in IE6-8 (JQuery Accepted)IE6-8 中的纯 CSS 圆角（接受 JQuery）
【发布时间】：2011-04-05 02:31:19
【问题描述】：

有很多 JQuery 插件可以为不支持 CSS3 的浏览器提供圆角。它们要么不起作用，要么在你看到它没有样式的地方产生丑陋的效果，然后 JS 启动并最终使它们变圆。

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

到目前为止，如果将 .htc 文件与 www.css3pie.com 一起使用，这是迄今为止我遇到的最佳匹配。仍然存在延迟（不确定是否可以解决）。

css3pie 压缩了大约 26k，所有者说如果你有 JQuery，可能会有更少的脚本。（无论如何，我都计划使用 JQuery）。

理想情况下，我希望它支持渐变、边框半径和框阴影。目前 css3pie 可以按照我的需要完成所有这些工作，除了 box-shadowing。如果背景是透明的，就会搞砸，如下所示：http://github.com/lojjic/PIE/issues#issue/12

我愿意接受 IE6 中没有这些功能。

我想也许我就是不能吃蛋糕也不能吃。现在，我将坚持使用 css3pie.com 并忍受烦人的延迟，并且不允许在 IE 中使用 box-shadow。没什么大不了的，因为 IE9 应该可以解决这个问题-交叉手指-

【问题讨论】：

animuson：css3pie 在 IE6 中的圆角效果很好。
刚刚重新标记了这个，没有理由使用三个标签（无论如何，这是人们设计的唯一三个 IE 版本）
@蒋毅：IE9呢？ :)
@BoltClock 鉴于它还没有出来，我会说不。你只是<pedantic> ;)

标签： jquery internet-explorer css

【解决方案1】：

如果您正在寻找非常平滑的圆角并且在所有浏览器中都有效，那么有一个简单的 JavaScript 叫做 curvycorners

只需要在里面包含js文件

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

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

【讨论】：

【解决方案2】：

我认为您可能会发现这个密切相关的问题很有趣：

Creating rounded corners using CSS

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

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

【讨论】：

【解决方案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>

【讨论】：

应该是$(document)...我花了一分钟才弄明白。 Chrome 一直在抱怨 ;...大声笑。此外，使用“this”在 IE8 中不起作用（没有测试其他 IE）
另外，即使我强制它按名称查找元素，它也会摆脱它的边框。不是 css3pie 的好替代品。
它很好，事实上它也适用于 html5。即，如果浏览器支持 html5，那么它会尝试使用 css3 并生成基于浏览器的 css 圆角。

【解决方案4】：

如果您必须支持 IE6 的圆角，也许您可以看看 Curved Corner.

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

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

【讨论】：

知道 CSS3 PIE 存在，你还会推荐这个吗？

【解决方案5】：

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

边框半径（圆角）
盒子阴影
边框图片
渐变背景

非常方便。

【讨论】：

【解决方案6】：

IMO 你不应该关心像圆角或 IE 下的阴影这样不重要的事情。页面应该在所有可能的浏览器下看起来都一样的时代终于一去不复返了。作为开发人员，您有责任正确显示页面骨架，但 eye-candy 是一项浏览工作。如果某些浏览器不支持某些 CSS3 元素 - 那么这是它的用户的问题。他们使用蹩脚的浏览器——他们看到蹩脚的网站（嗯……也许不是蹩脚但有点丑陋）。

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

也就是说：不用在意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;

【讨论】：

虽然我大体上同意，但我正在为一家公司编写页面，该公司希望网站在他们的 comps (IE) 上看起来应该如何。 css3pie 技术也允许在 4 行中完成 CSS。您只需为 IE 添加一个行为。
如果您的老板希望它在多个浏览器中看起来不错，那就让它看起来不错。很少有认真的 Web 开发人员会拒绝至少将注意力转向浏览器独立性。