0

我正在使用一个 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 会覆盖它们，或者拥有它们是否仍然有好处等？

4

2 回答 2

1

Modernizr 将在其检测中包含这些前缀样式，所以是的，您应该保留它们。

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

Javascript 代码只会被 IE7 *或更早版本使用，该box-sizing样式根本不支持。


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

于 2013-05-15T15:05:16.293 回答
0

你使用的 polyfill 对性能来说并不是很好。所以你最好将这个 polyfill 用于IE 6/7。并将此代码段用于其他所有内容，因为您可以在此表中看到，每个浏览器都支持 box-sizing 。

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

注意：IE 6 和更早版本的 quirks 模式支持 box-sizing。

于 2013-05-15T11:59:45.530 回答