jQuery .css（）borderRadius在Windows上的FF（3.6）和IE（6,7）中不起作用

Question

以下代码似乎在Windows XP上的FF（3.6）和IE（7）中不起作用。

$("#myDiv").css({
  mozBorderRadius: "6px",
  webkitBorderRadius: "6px",
  borderRadius: "6px"   
});

我能做些什么让这项工作成功吗？

C

Answer 1

IE7不理解border-radius，因此忽略了CSS。您既可以使用它，也可以尝试使用图像找到一个奇特的解决方案来渲染圆角。

我会选择第一个，尽管如果你真的需要那些旧浏览器中的圆角，有很多例子（like this one）。

FF 3.6确实支持圆角码，但你应该使用-moz-border-radius。

Answer 2

对于Firefox，as GolezTrol said，它应该是-moz-border-radius（或MozBorderRadius）而不是mozBorderRadius。不幸的是，IE 6和7都不支持border-radius所以你必须通过以下方式解决这个问题：

• 使用图片

或者，对于懒惰的人：

• 使用css3pie。您只需要在样式表中为可能包含border-radius的元素添加一行：

  behavior: url(path/to/PIE.htc);
  

  请注意，此解决方案还允许您使用box-shadow和线性渐变，这可能也很有用。只需看看demo。