Question

我正在使用polyfill，因此box-sizing应该适用于所有支持JS的浏览器，以防止出现如下布局问题：

<script type="text/JavaScript">
//extend modernizer
Modernizr.addTest("boxsizing", function() {
    return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
    });
$(function(){
    if( !($('html').hasClass('boxsizing')) ){
        $('.boxSized, .boxSized *').each(function(){
            var fullW = $(this).outerWidth(),
                actualW = $(this).width(),
                wDiff = fullW - actualW,
                newW = actualW - wDiff;

            $(this).css('width',newW);
        });
    }
});

</script>

然而，当浏览器没有启用box-sizing:时查看此代码时，是否会使用这种短的polyfill，我认为这不会影响网站性能？

我使用前缀元素时的问题如下：

-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

我想知道前缀元素现在是多余的，因为polyfill会覆盖它们，或者是否仍然有益于它们等？

Answer 1

Modernizr会在检测中包含那些带前缀的样式，所以是的，你应该保留它们。

如果删除它们，那么您的网站将会中断，因为Modernizr将检测到需要前缀的浏览器支持该功能，因此不会运行javascript代码，因此您根本不会拥有该样式那些浏览器。

Javascript代码仅供IE7 ^*或更早版本使用，其中根本不支持box-sizing样式。

（^* ...或其他真正的旧浏览器，如Opera 9或Firefox 1，但实际上没有人使用这些浏览器）

Answer 2

您使用的填充物对性能并不是很好..所以最好将此填充物用于IE 6/7。并将此代码段用于其他所有内容，因为您可以在此table中看到每个浏览器都支持大小调整。

* {
    -webkit-box-sizing: border-box; /* Webkit browsers chrome/safari */
    -moz-box-sizing: border-box; /* Firefox */
    box-sizing: border-box;
}

注意：在怪癖模式下，IE 6及更早版本支持大小调整。

Modernizr Polyfill vs前缀CSS3

2 个答案: