如何为 IE9 编写 CSS3 圆角？答案

【问题标题】：How to write CSS3 rounded corners for IE9?如何为 IE9 编写 CSS3 圆角？
【发布时间】：2012-09-30 22:21:49
【问题描述】：

我曾经使用 CSS3 为 google Chrome 和 Safari 编写圆角，如下所示：

-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;

对于 FireFox：

-moz-border-radius: 5px 5px 5px 5px;

IE9怎么写？

【问题讨论】：

你应该注意你的 CSS。如果你这样做了，你会注意到最后一个 WebKit 属性是前四个属性的简写。
是的，但是当我使用速记时，它在我的 mac safari 上不起作用

标签： css internet-explorer-9 rounded-corners

【解决方案1】：

不需要供应商前缀（Opera 也支持）：

border-radius: 5px;

您可以将您的 WebKit 和 Mozilla 特定样式分别压缩为这些样式：

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

事实上，很快您就不再需要这两个属性了，因为标准的border-radius 现在已被 Safari 5+ 和 Firefox 4+ 支持。

【讨论】：

完全删除 WebKit 前缀可以说是安全的：stackoverflow.com/questions/5137937/…
是的，但是当我使用速记时，它在我的 mac safari 上不起作用
@Amr ElGarhy：你没有使用 Safari 的第一个版本，是吗？此速记版本适用于 Safari 2.0 及更高版本。
可能我不确定，我现在附近没有mac，稍后会检查并告诉你版本，但我现在知道它是旧的mac机器。
请注意，如果（并且您暂时应该这样做）您正在为 mozilla 和 webkit 使用供应商特定的前缀，那么您的非供应商特定的代码应该在之后那些，即：-moz-border-radius: 5px; -webkit-border-radius：5px；边框半径：5px;

【解决方案2】：

border-radius: 5px 5px 5px 5px;

【讨论】：

【解决方案3】：

<!DOCTYPE html> 元素是 IE9 中圆角的关键

另见：HTML DOCTYPE Declaration

【讨论】：

通过声明，您是在告诉浏览器您的页面将呈现为“HTML5”。许多功能都依赖于正确的声明。