如何使用Modernizr在IE8中获取边界半径工作？ [英] How can I use Modernizr to get border-radius working in IE8?

问题描述

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

I know there has been numerous articles about obtaining rounded corners in IE8. My question is, how to use Modernizr to support CSS3/HTML5 features?

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

For example to show rounded corners in IE8, I am using CSS-3 property

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

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

I have included Modernizr in my page, but still not able to see rounded corners in IE8.

推荐答案

Modernizr不启用功能，它只是测试是否可用。对于CSS，它还可以删除使用供应商特定的属性，如 -moz - * 和 -webkit - * 允许您简单地使用标准属性：

Modernizr does not enable features, it just tests if they are available. For CSS, it can also remove the need to use vendor specific properties such as -moz-* and -webkit-* allowing you to simply use the standard properties instead:

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

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

For rounded corners in IE8, I wouldn't bother with Modernizr feature detection, simply use CSS PIE to enable them.

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

=http://css3pie.com/documentation/ =noreferrer>关于如何让此工作的文档。

Make sure to read the docs on how to get this to work.

作为旁边的注释，标准 border-radius 已经被mozilla和webkit浏览器支持了一段时间，你可能想检查你是否实际上定位任何需要的浏览器这些前缀： http://caniuse.com/#search=border-radius （点击显示所有版本）

As a side note, standard border-radius has been supported for quite some time now by mozilla and webkit browsers, you might want to check to see if you are actually targeting any browsers that need those prefixes: http://caniuse.com/#search=border-radius (click "Show all versions")

这篇关于如何使用Modernizr在IE8中获取边界半径工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！