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

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 */
}

请务必阅读有关如何使其工作的文档.

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