2011-12-06 70 views
3

我正在寻找最佳的解决方案在那里为上盒圆角,这在所有的浏览器工作(包括IE 7-9)适用于所有浏览器的圆角解决方案?

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

是否有任何其他良好的解决方案在那里的圆角crossbrowser明智?

+0

但是'边境radius' * *是在IE9中,只留下IE8作为唯一相关的浏览器不支持该CSS属性来实现。 (停止关心IE7和IE6。) –

+0

我知道这一点,我对此很兴奋。我不在乎IE6,但很多人仍然使用IE7 + IE8,所以不幸的是这在大公司中不容忽视.. – donpedroper

+0

http://arstechnica.com/web/news/2011/04/web-浏览器市场份额现代浏览器edition.ars你不会支持一小部分人,直到他们了解Chrome当然=) – Coops

回答

2

在这里你有一个指南来创建一轮边界对于所有浏览器

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

+0

http://border-radius.com/我真的很喜欢IE的耻辱。我最近了解到,Outlook 07-10使用Word进行HTML编码,所以猜猜看,什么都不支持。凌乱的html/css在这里我们来了=( – Coops

+0

你可以在这里提供一些更多的描述吗?我认为最近有一个 - 正确的做法,只能得到链接的答案,部分是因为linkrot,部分是因为它更好对于每个人如果答案是独立的能够 – Pops

+0

不幸的是,你不能使用这个脚本在IE浏览器的盒子上悬停效果:/ – donpedroper

2

对于所有浏览器都没有纯粹的CSS解决方案,您必须使用图像创建此图像,无论是使用JavaScript解决方案还是包含圆形图像的CSS代码。

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

0

它不完全是你正在寻找(说实话,如果你真的想IE7-8支持,CSSPIE是相当不错的答案)。

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

0

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

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

0

截至撰写本文时,我不认为跨浏览器圆角还有其他“良好”解决方案。我搜索了高和低,CSSPIE是我找到的最佳解决方案。 “已知问题”并不像在IE中看起来很糟糕的页面或者为所有事物寻求图像的替代方案一样糟糕。

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

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

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

0

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

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

相关问题