0

A CSS box-sizing polyfill

IE6/7 的 CSS box-sizing：border-box polyfill。「A CSS box-sizing: border-box polyfill for IE 6/7」

Github 资源库
主要指标

Github星跟踪图

前言和致谢

这个 box-sizing polyfill 的多边形填充是基于 Erik Arvidsson 之前所做的工作，他在 2002 年发表在 WebFX 上。

由于有一些边缘/大量使用的情况下，我开始进一步推动它。而且由于原版没有意识到 IE8 的存在，我还增加了 box-sizing 的特征检测，当检测到正值时就不做任何事情。

期间我还借鉴了 Dean Edwards 的 IE7.js 脚本的尺寸测量技术。

使用方法

在你指定的每一个 box-sizing: border-box; 后面添加 behavior/HTC。 

box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);

如果你在行为属性前加上一个星号，就像上面看到的那样，它只会被 IE6 和 IE7 看到，而不会被 IE8+ 看到（这是一个 hack），这对那些新的浏览器来说性能更好。

HTC 文件的 URL 必须是相对于你的 HTML(!)文档，而不是相对于你的 CSS。这就是为什么我建议你使用绝对路径，就像在例子中一样。

请确保检查你的服务器配置，并在需要时更新它以使用正确的内容类型。您可以在 .htaccess 文件中进行更新。 

AddType text/x-component .htc


主要指标

概览
名称与所有者Schepp/box-sizing-polyfill
主编程语言
编程语言 (语言数: 0)
平台Web browsers
许可证
所有者活动
创建于2011-12-22 16:58:49
推送于2015-11-30 10:51:27
最后一次提交2014-11-25 09:47:12
发布数0
用户参与
星数1.2k
关注者数58
派生数190
提交数21
已启用问题?
问题数38
打开的问题数28
拉请求数5
打开的拉请求数8
关闭的拉请求数0
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

Preface and Credits

This box-sizing polyfill is based on previous work done by Erik Arvidsson, which he published in 2002 on WebFX.

Since there were some edge/heavy usage cases where it broke I started pushing it further. And since the original was not aware of IE8 I also added feature-detection for box-sizing, to do nothing when detected positive.

During that I also borrowed dimension measuring techniques from Dean Edwards' IE7.js script.

Usage

Add the behavior/HTC after every box-sizing: border-box; that you assign:

box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);

If you prefix the behavior property with a star, like seen above, it will only be seen by IE6 & IE7, not by IE8+ (it's a hack) which is better for the performance on those newer browsers.

The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
That's why I'd advise you to use absolute paths like in the example.

Please make sure to check your server configuration and update it to use the correct content-type if needed.
You can do this in a .htaccess file:

AddType text/x-component .htc