所有浏览器的圆角解决方案？答案

【问题标题】：Round corner solution for all browsers?所有浏览器的圆角解决方案？
【发布时间】：2012-01-14 04:30:39
【问题描述】：

我正在为盒子上的圆角寻找最佳解决方案，它必须适用于所有浏览器（包括 IE 7-9）

我一直在寻找 CSS3 PIE，在我看到“已知问题”列表之前，它似乎很有希望。相对路径和 z-index 问题让我寻找其他解决方案。我注意到他们也有针对 CSS3 PIE 的“JS 解决方案”，但这也有一些很大的缺点..

对于圆角跨浏览器而言，还有其他好的解决方案吗？

【问题讨论】：

但是 border-radius is 在 IE9 中实现，这使得只有 IE8 作为唯一不支持该 CSS 属性的相关浏览器。（别再关心IE7和IE6了。）
我知道这一点，我对此感到非常兴奋。我不关心IE6，但是很多人仍然使用IE7+IE8，所以不幸的是，这在大公司中不能被忽视..
arstechnica.com/web/news/2011/04/… 当然，在他们了解 Chrome 之前，您不会支持少数人 =)
在我看来，需要做的是让您的客户确信圆角不会影响其网站的可用性。使用它们可能看起来会好一些，但必要的功能仍然可用。因此，该网站不需要在所有浏览器中看起来都完全相同。对于像圆角这样纯粹的装饰性的东西，不支持旧浏览器是可以的。
@idrumgood 完全同意。这就是我们在商店中采用的方法（我们的主要联邦客户居住在 IE7 中）。

标签： html internet-explorer css cross-browser rounded-corners

【解决方案1】：

没有适用于所有浏览器的纯 CSS 解决方案，您必须使用图像创建此解决方案，使用 Javascript 解决方案或包含圆形图像的 CSS 代码。

非 CSS3 解决方案要怪 IE7-9...

【讨论】：

【解决方案2】：

这里有一个为所有浏览器创建圆形边框的指南

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

【讨论】：

border-radius.com 我真的很喜欢 IE 的耻辱。我最近了解到 Outlook 07-10 使用 Word 进行 HTML 编码，所以猜猜看，什么都不支持。乱七八糟的html/css我们来了=(
您能在这里提供更多描述吗？最近有一个——我认为是有道理的——推动从 SO 中获得仅链接的答案，部分原因是 linkrot，部分原因是如果答案能够独立存在，这对每个人都更好。
不幸的是，您无法在 IE 中使用此脚本对框进行悬停效果：/

【解决方案3】：

我能建议的最好的是

border-radius: 5px;

我知道它不适用于所有浏览器，但它是一个 CSS3 功能，所以迟早它会在所有浏览器中运行。在这里你可以看到它适用于所有主流浏览器 http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ 它也适用于IE9

【讨论】：

【解决方案4】：

这并不是您正在寻找的答案（老实说，如果您真的想要 IE7-8 支持，CSSPIE 是相当不错的）。

我最近一直在我的网站上使用prefix-free，所以我不必担心供应商支持。只需使用您想要的 CSS3，js 会负责在必要时添加所有前缀。如果/当供应商都支持 CSS3 属性时，只需删除 JS 文件，而不是梳理您的 css 并删除所有前缀部分。

【讨论】：

【解决方案5】：

既然你已经在上面提到了 IE7，所以我想说没有纯 CSS 解决方案来实现这一点。现代浏览器支持border-radius 来实现圆角，您需要为基于mozilla 和webkit 的浏览器指定-moz 和-webkit。

要实现圆角，我建议您将所有圆角放在一个图像中并制作一个精灵。然后使用 background-position 让它在所有浏览器范围内工作，包括我们的老朋友 IE6。

【讨论】：

【解决方案6】：

在撰写本文时，我认为跨浏览器圆角没有其他“好的”解决方案。我搜索了高低，CSSPIE 是我找到的最佳解决方案。 “已知问题”并不像在 IE 中使用看起来很糟糕的页面或使用图像解决所有问题那样糟糕。

您遇到的路径问题可能与 PIE.htc 路径相对于您正在查看的文档的事实有关，而不是与调用它的 CSS 文件有关。请务必检查一下，您应该身体状况良好。

z-index 问题可能与没有设置 -pie-watch-ancestors 值的 PIE 边界半径父级的子级有关。或者，您可以在孩子身上再次单独调用 PIE 行为。

CSS3PIE 需要一点时间来适应，尤其是当您试图让它与 .less 文件一起使用时，或者在 html5 元素上使用时，或者如果您在 Mac 上的 Parallels 中运行 IE。在这些情况下，有很多事情可能会出错。不过，老实说，我相信 PIE 是您最好的选择。如果一开始你没有成功，不要放弃。您可以在旧版本的 IE 中使用边框半径，以及其他重要的增强功能，如渐变、框阴影等。

【讨论】：

【解决方案7】：

我相信下面的链接在大多数浏览器中都有效，并且 Facebook 花了一周的时间为他们的网站添加圆形样式，然后他们意识到为 IE 用户加载角落需要一段时间。

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

【讨论】：