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