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

时间:2011-12-06 15:14:37

标签: html internet-explorer css3 cross-browser rounded-corners

我正在寻找最好的解决方案,用于盒子上的圆角,这些解决方案必须适用于所有浏览器(包括IE 7-9)

我一直在研究CSS3 PIE,看起来很有希望,直到我看到“已知问题”列表。相对路径和z-index问题使我寻找其他解决方案。我注意到他们也有CSS3 PIE的“JS解决方案”,但这也有一些很大的缺点..

还有其他好的解决方案可以用于圆角浏览器吗?

7 个答案:

答案 0 :(得分:2)

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

非CSS3解决方案责备IE7-9 ......

答案 1 :(得分:2)

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

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

答案 2 :(得分:0)

我能建议的最好的是

border-radius: 5px;

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

答案 3 :(得分:0)

这不是您正在寻找的答案(老实说,如果您真的想要IE7-8支持,CSSPIE非常不错)。

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

答案 4 :(得分:0)

由于你已经在上面输入了IE7,所以我想说没有纯粹的CSS解决方案来实现这一目标。现代浏览器支持border-radius以实现圆角,您需要为基于mozilla和webkit的浏览器指定-moz-webkit

为了获得圆角,我建议你将所有圆形玉米器放在一个图像中并制作一个精灵。然后使用background-position使其在所有浏览器中工作,包括我们的老朋友IE6。

答案 5 :(得分:0)

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

您遇到的路径问题可能与PIE.htc路径相对于您正在查看的文档的事实有关,而与调用它的CSS文件无关。一定要检查一下,你应该保持良好状态。

z-index问题可能与PIE border-radius父级的子级没有-pie-watch-ancestors值设置有关。或者,您可以在子项上单独再次调用PIE行为。

CSS3PIE需要一点时间的习惯,特别是如果你试图使用.less文件,或者使用shold html5元素,或者如果你在Mac上的Parallels中运行IE。在这些情况下,有很多事情可能会出错。不过我真的相信,PIE是你最好的选择。如果一开始你没有成功,不要放弃。您可以在旧版本的IE中使用border-radius,以及其他重要的增强功能,如渐变,盒阴影等。

答案 6 :(得分:0)

我相信下面的链接适用于大多数浏览器,并且Facebook在一周内做了类似的事情,为他们的网站添加了一个圆形样式,然后他们意识到需要一段时间来加载IE用户的角落。

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