html - 我怎样才能使用 Modernizr 让 border-radius 在 IE8 中工作？

Question

我知道已经有很多关于在 IE8 中获取圆 Angular 的文章。我的问题是，如何使用 Modernizr 来支持 CSS3/HTML5 特性？

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

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

我在我的页面中加入了 Modernizr，但在 IE8 中仍然看不到圆 Angular 。

Answer 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 中的圆 Angular ，我不会费心使用 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 (点击“显示所有版本”)