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 repo
Main metrics

Github stars Tracking Chart

前言和致谢

这个 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


Main metrics

Overview
Name With OwnerSchepp/box-sizing-polyfill
Primary Language
Program language (Language Count: 0)
PlatformWeb browsers
License:
所有者活动
Created At2011-12-22 16:58:49
Pushed At2015-11-30 10:51:27
Last Commit At2014-11-25 09:47:12
Release Count0
用户参与
Stargazers Count1.2k
Watchers Count58
Fork Count190
Commits Count21
Has Issues Enabled
Issues Count38
Issue Open Count28
Pull Requests Count5
Pull Requests Open Count8
Pull Requests Close Count0
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

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