Question

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

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

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

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

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中的圆角，我不会打扰Modernizr特征检测，只需使用CSS PIE启用它们。

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

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

作为旁注，mozilla和webkit浏览器已经支持标准border-radius很长一段时间了，您可能需要检查一下您是否实际定位了需要这些前缀的任何浏览器：{{3 （单击“显示所有版本”）

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

1 个答案: