在IE 7+中有/没有JavaScript的圆角？

Question

要在容器元素上创建圆角，我使用以下CSS：

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

然而，IE似乎没有识别和解释边框-radius属性(至少是7-8版本，显然是针对版本9的)。

是否有一个完全可以在CSS中完成的解决方案(没有脚本，没有额外的标记)？

对于JavaScript/jQuery解决方案:如果我可以包含一个读取CSS的脚本，解释边界半径属性(包括边框左上半径，边框右上半径)，并相应地应用这些角，我就会使用基于这些解决方案的解决方案。这个存在吗？

Answer 1

据我所知，对于IE<9，没有办法在纯CSS中做到这一点。

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

有Javascript解决方案 可用，但是正如您说过不想实现它们的那样，您有点卡住了。

除非您想要使用图像，否则如果您有静态的size元素，但是如果它们更改了大小，它就会工作得很好。

除此之外，我不知道任何纯粹的CSS解决方案，没有大量的黑客标记。

更新

我已经链接到一个可以为您完成此操作的资源，CurvyCorners jQuery将检测DOM元素上使用-webkit-border-radius和moz-border-radius的情况，并使用一系列没有图像的小DIVs在IE中复制效果。您还可以告诉它将效果应用于特定的元素。

更新#2

在斯普德利提出了查看CSS3Pie的建议之后，我非常建议这样做，因为它使用的是只适用于IE的CSS属性behaviour，因此不会影响其他浏览器，这也意味着您的页面不会添加恶意标记(Curvy Corner添加了许多小div)，也不会使用图像。

希望它有帮助:)

Answer 2

您需要一种无需脚本和任何额外标记的方法。这根本不可能。IE7/8中缺少了这个特性，要想让IE做到这一点，唯一的方法就是用脚本或标记来模拟这个特性。

最好的选择是那些只影响IE和不可见的其他浏览器。这意味着CSS3Pie站在所有其他选项之上，因为它所使用的技术只有IE支持。它还允许您在CSS中以与其他浏览器相同的方式指定边界半径，从而使其更加一致。

就我个人而言，我每次都会支持这个解决方案。这是迄今为止最干净的解决方案，你会找到IE。忘记任何jQuery或纯javascript解决方案；它们几乎都有这样或那样的问题，至于涉及角图形的标记选项，甚至不要去想它！

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

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

Answer 3

您可以使用.htc作为边框半径。

htc文件的link1

htc文件的link2

我建议你看看这个网站。

请接CSS3