如何在Internet Explorer 7中启用框大小调整[Quicktip]

框大小调整（具有border-box的值）使我们能够保留元素的宽度和高度，而无需考虑其具有的其他填充和边框。

我们在上一篇文章中介绍了CSS3 Box Sizing 。

但是，如下所示，CSS3 Box Sizing在Internet Explorer 7（IE7）和更早版本中不起作用。

这使得测量和定义元素尺寸变得更加容易 。

但是由于IE8无法识别box-sizing属性，因此当第二列的总宽度超过其父容器的width时， 将向下推第二列 。

在以上屏幕截图中看到的两列都指定了width ， height ， padding和box-sizing 。

如果您的网站必须支持IE7（无论出于何种原因），同时又保留CSS3 Box Sizing，则可以使用以下技巧。

您将必须相应地调整每列的大小以使其适合其中，这可能是非常繁琐的任务， 具体取决于您需要处理的元素数量 。

盒装施胶料

从Github存储库下载文件并将其放入例如CSS文件夹中。

此polyfill以HTC文件的形式出现，由Christian Schaefer开发。

为了使IE8（及以下版本）能够确认Box Sizing ，我们可以使用polyfill。

以这种方式在HTML文档中添加链接，以便仅在IE7中提供该链接。

创建一个专用于Internet ExplorerCSS样式表。

<!--[if lte IE7]>
	<link rel="stylesheet" href="css/ie.css">
<![endif]-->

下面CSS规则将对所有元素应用box-sizing 。

然后将以下代码放入ie.css 。

* {
	behavior: url(css/boxsizing.htc);
}

应用此技巧时需要注意的几件事：

正如您在上面看到的，我们也没有在代码中包含它们。

但是，由于IE7和IE6不支持伪元素，因此在这种情况下没有理由使用伪元素选择器。

保罗·爱尔兰（Paul Irish）也提供了一个技巧 ，可以使用*:before, *:after对伪元素应用box-sizing 。

结果

让我们打开Internet Explorer 7，然后启动开发人员工具（F12）。

列宽设置为50％，因此即使我们也为其设置了填充，每列的宽度也应为250px。

在这里，我们有两列，其父容器的宽度设置为500px。

在我们的例子中，框的宽度保持为250px。

您应该看到在IE7中该列现在包括填充和边框，作为总大小的一部分。

转到“开发人员工具”的“ 布局”标签以查看详细的列大小。

翻译自: https://www.hongkiat.com/blog/box-sizing-polyfills/