IE 7+中带有/不带JavaScript的圆角?

时间:2010-12-17 14:08:47

标签: javascript css

要在我的容器元素上创建圆角我使用此CSS:

border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;

但是,IE似乎没有识别和解释border-radius属性(至少版本为7-8,显然是版本9)。

是否有针对此的解决方法完全可以在CSS中使用(没有脚本,没有额外的标记)?

对于JavaScript / jQuery解决方案:我会使用基于这些的解决方案,如果我可以包含一个可以读取我的CSS的脚本,解释border-radius属性(包括border-top-left-radius, border-top-right-radius),并相应地应用角点。这是否存在?

5 个答案:

答案 0 :(得分:13)

据我所知,IE< 9在纯CSS中无法做到这一点。

据记载,IE9具有边界半径支持。

Javascript workarounds available,但正如您所说,您不想实施它们,您有点卡住了。

除非你想使用图像,否则如果你有静态尺寸元素,这种方法效果很好,但如果它们改变了尺寸则不行。

除此之外,我没有任何纯粹的CSS解决方案,没有大量的hacky标记。


<强>更新

我已经链接到可以为您执行此操作的资源,CurvyCorners jQuery将检测DOM元素上-webkit-border-radiusmoz-border-radius的使用,并使用以下方法在IE中复制效果一系列没有图像的小DIV。您也可以告诉它将效果应用于特定元素。


更新#2

在Spudley建议检查CSS3Pi e之后,我非常建议这样做,因为它使用仅适用于IE的CSS属性behaviour,所以它不会搞砸与其他浏览器一样,这也意味着没有添加到页面上的hacky标记(Curvy Corners添加了许多小div)并且没有使用图像。

希望有所帮助:)

答案 1 :(得分:6)

你想要一种方法来做到这一点,没有脚本和没有任何额外的标记。这根本不可能。 IE7 / 8中缺少这个功能,让IE进行操作的唯一方法是使用脚本或标记来模拟该功能。

最佳选项是仅影响IE并且对其他浏览器不可见的选项。这意味着CSS3Pie高于所有其他选项,因为它使用的技术仅由IE支持。它还允许您以与其他浏览器相同的方式在CSS中指定边框半径,使其更加一致。

就个人而言,我每次都会选择这个解决方案。到目前为止,它是IE中最干净的解决方案。忘记任何jQuery或纯JavaScript解决方案;他们几乎都有这种或那种问题,以及涉及角图形的标记选项;只是不要考虑它!

CSS3Pie相对于其他常见解决方案的真正好处在于它使用基于矢量图形的解决方案,而不是像CurvyCorners和其他人那样将大量的div粘贴到您的文档中。这意味着CSS3Pie生成的圆角可以平滑地绘制,并且可以在元素本身及其后面的背景图形上正常工作。大多数其他解决方案在这些方面存在严重问题。

我不知道为什么你反对使用脚本 - 特别是像这样的HTC,不会妨碍其他脚本。最糟糕的情况是用户关闭了脚本。在这种情况下,他们得到的只是方角;这不是世界末日。

答案 2 :(得分:3)

我认为没有脚本就没有办法做到这一点。

我看到了这个项目:http://css3pie.com/

但它仍然需要将脚本作为HTC行为加载。

无论如何,我最好的答案就是在IE中留下角落(顺便说一句,似乎IE9将支持边界半径)应用优雅降级原则。

许多网站都这样做,包括非常受欢迎的网站:请参阅twitter.com(它看起来只是IE中的所有平方)

答案 3 :(得分:2)

你可以使用.htc作为边界半径。
link1 for htc files
link2 for htc files

我建议看看这个网站。
CSS3 Please

答案 4 :(得分:1)

您正在讨论的脚本/ jQuery解决方案确实存在,请查看jQuery Curvy Corners