如何使用 Modernizr 让边界半径在 IE8 中工作？答案

【问题标题】：How can I use Modernizr to get border-radius working in IE8?如何使用 Modernizr 让边界半径在 IE8 中工作？
【发布时间】：2012-11-08 12:38:16
【问题描述】：

我知道有很多关于在 IE8 中获得圆角的文章。我的问题是，如何使用 Modernizr 来支持 CSS3/HTML5 功能？

例如在 IE8 中显示圆角，我使用的是 CSS-3 属性

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

我已将 Modernizr 包含在我的页面中，但在 IE8 中仍然无法看到圆角。

【问题讨论】：

标签： html css modernizr

【解决方案1】：

Modernizr 不启用功能，它只是测试它们是否可用。对于 CSS，它还可以消除使用供应商特定属性（例如 -moz-* 和 -webkit-*）的需要，让您可以简单地使用标准属性：

.myElement {
    -webkit-border-radius: 20px; /* No need for this */
    -moz-border-radius: 20px;    /* No need for this */
    border-radius: 20px;
}

对于 IE8 中的圆角，我不会打扰 Modernizr 功能检测，只需使用 CSS PIE 启用它们。

.myElement {
    border-radius: 8px;
    behavior: url(/PIE.htc); /* only IE will use this */
}

请务必阅读the docs，了解如何使其发挥作用。

作为旁注，标准的border-radius 已经被 mozilla 和 webkit 浏览器支持了很长一段时间，您可能想检查一下您是否真的针对需要这些前缀的任何浏览器：http://caniuse.com/#search=border-radius（单击"显示所有版本")

【讨论】：

什么是 CSS PIE...它是用于跨浏览器 css 生成的任何库吗？适用于所有浏览器还是仅适用于 IE？请让我知道。谢谢