支持 IE 中的“border-radius”答案

【问题标题】：Support for "border-radius" in IE支持 IE 中的“border-radius”
【发布时间】：2010-10-12 18:14:08
【问题描述】：

有谁知道 Internet Explorer 是否/何时支持“border-radius”CSS 属性？

【问题讨论】：

【解决方案1】：

是的！ 2011年1月IE9发布时。

假设您希望所有四个边都为 15px：

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 将使用默认的border-radius，所以只要确保在所有调用边框半径的样式中都包含它。然后您的网站就可以支持 IE9。

-moz-border-radius 用于 Firefox，-webkit-border-radius 用于 Safari 和 Chrome。

另外：别忘了声明你的IE编码是ie9：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

一些懒惰的开发者有<meta http-equiv="X-UA-Compatible" content="IE=7" />。如果该标签存在，border-radius 将永远无法在 IE 中使用。

【讨论】：

大概如果你不使用 X-UA-Compatible 元标记，你不需要添加它只是为了让它在 IE9 中工作？
您应该将供应商前缀版本放在首位，标准放在最后，这样如果浏览器支持实际标准，那么它将使用该标准而不是供应商前缀版本。
正确你不需要meta标签..你只需要替换ie7模拟器如果它包含。否则，别担心。
FYI 在当前的 IE9 beta 'border-radius' 中使用单个值可以正常工作。除非您确实希望它们不同，否则所有四个值都不是必需的。
@nailer：感谢更新角。IE9 的第一个 alpha vs 和 beta vs 需要声明所有 4 个角。我刚刚下载了最新的 ie9 RC，它让我声明一个值.. 不确定什么时候改变了..

【解决方案2】：

自从一年前提出这个问题以来，这个问题的答案已经发生了变化。（这个问题目前是谷歌搜索“border-radius ie”的最佳结果之一。）

IE9 将支持border-radius。

有一个平台预览available supportsborder-radius。您将需要 Windows Vista 或 Windows 7 来运行预览版（以及发布时的 IE9）。

【讨论】：

【解决方案3】：

在你等待的时候..Curved corner (border-radius) cross browser

【讨论】：

【解决方案4】：

解决方法和方便的工具：

CSS3Pie 使用 .htc 文件和行为属性在 IE 6 - 8 中实现 CSS3。

Modernizr 是一种 javascript，它会将类放在您的 html 元素上，允许您根据不同浏览器的功能为不同的浏览器提供不同的样式定义。

显然，这些都增加了更多的开销，但由于 IE9 仅在 Vista/7 上运行，我们可能会被卡住很长一段时间。截至 2010 年 8 月，Windows XP 仍占 Web 客户端操作系统的 48%。

【讨论】：

CSS3 PIE 是迄今为止最简单且干扰最小的选项。

【解决方案5】：

IE8 没有计划。请参阅CSS Compatibility page。

除此之外，还没有发布任何计划。有传言称IE8 will be the last Windows XP 版本

【讨论】：

你显然错了，因为 IE9 应该也支持 CSS3，而且我没有看到 IE 在任何地方死去。有人请杀死IE
原来 IE8 是 Windows XP 的最后一个版本。

【解决方案6】：

<!DOCTYPE html>没有这个标签border-radius在IE9中不起作用，不需要meta标签。

【讨论】：

【解决方案7】：

快速更新这个问题，IE9会根据：http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx支持border-radius

【讨论】：

【解决方案8】：

使用-ms-border-radius: 15px，任何使用css -ms-的元素都兼容IE。

【讨论】：

【解决方案9】：

IE的圆角半径问题解决了。

http://kbala.com/ie-9-supports-corner-radius/

【讨论】：

【解决方案10】：

如何支持边框半径和背景渐变。是的 IE9 是分别支持它们，但如果你将两者混合，渐变会从圆角溢出。下面是一个糟糕示例的链接，但我在自己的测试中也看到了它。应该截图:(

也许真正的问题是 IE 何时会在没有 MS-FILTER 专有黑客的情况下支持 CSS 标准。

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

【讨论】：

IE10 将支持适当的 CSS3 渐变（当前的 IE10 开发人员预览版已经通过 -ms-linear-gradient 支持）。如果您想要在 IE9 中使用边框半径的渐变，您需要使用 SVG（外部 SVG 文件或在数据 URI 中编码的文件） - 参见 css3wizardry.com/2010/10/29/css-gradients-for-ie9 - CSS3 PIE 也将很快自动执行此操作，有一个testing build available
快速解决方法是将其包装在另一个元素中。给父元素相同的边框半径，并将其溢出设置为隐藏。

【解决方案11】：

已解决 - 在 IE 10 和 11 中无法正确呈现边框半径

对于那些没有得到 -ms-border-radius: 或 border-radius: 在 IE 10,11 中工作它呈现所有正方形，然后按照以下步骤操作：

点击IE浏览器右上角的齿轮
点击兼容性视图设置
现在取消选中默认选中的 2 个框。

【讨论】：