在现代 Web 开发中，响应式设计（Responsive Design）已成为设计的标配，可以使网站在不同设备上完美地展现，然而在实际开发中，我们会遇到各种问题，其中就有 box-sizing 样式在 IE8 下的问题。
box-sizing 样式介绍
box-sizing 是 CSS3 新增的一个属性，用于控制元素的盒模型的计算方式。在盒模型中，一个元素的尺寸大小由其内容尺寸、内边距（padding）和边框（border）组成，即：元素的 width = 内容尺寸 + padding + border。
box-sizing 属性控制的是元素宽度计算的方式，可以有以下 3 种取值：
- content-box：默认值，元素的 width 只包含内容尺寸，不包含 padding 和 border。
- padding-box：元素的 width 包含内容尺寸和 padding，但不包含 border。
- border-box：元素的 width 包含内容尺寸、padding 和 border。
IE8 下的问题
在 IE8 中，box-sizing 属性只支持 content-box 和 border-box 两种取值，不支持 padding-box。当我们设置 box-sizing: padding-box 时，IE8 会把这个属性值当做未知属性，从而无法识别。而当我们设置 box-sizing: border-box 时，IE8 会把元素的 padding 和 border 宽度计算到 width 中，导致元素的实际宽度不符合预期。
解决方法
为了解决上述问题，我们需要对 IE8 下的 box-sizing 样式进行兼容处理。具体来说，我们可以使用条件注释（Conditional Comments）来针对 IE8 设置一个特定的样式，将原本应该应用在 padding-box 上的样式应用在 border-box 上。
示例代码如下：
-- -------------------- ---- -------
-- -------------- ---- --
----------- -----------
-- -- --- --- --
------- -- -- ---
-------
-- -------- ----------- ------- ---------- - --
--- -
----------- -----------
------ --------- - ------
-------- -----
------- --- ----- -----
-
--------
------------上述代码中，我们首先为 div 元素设置了一个默认样式 box-sizing: border-box，这样即使在 IE8 下该元素的宽度也会按照 border-box 的方式计算。
接着，我们使用条件注释（如果浏览器版本小于 IE9）来针对 IE8 设定了一个特定的样式，将原本应该应用在 padding-box 上的样式应用在 border-box 上。这样我们就能够让 IE8 下的盒模型计算方式与标准浏览器保持一致，从而达到兼容的效果。
总结
在响应式设计中，我们通常会使用 box-sizing 样式来设置盒模型的计算方式，但在 IE8 下会出现一些兼容性问题。为了解决这个问题，我们可以使用条件注释针对 IE8 设定一个特定的样式，从而实现兼容的效果。了解和掌握这个技巧，能够让我们更加熟练地处理前端中的各种兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf24eeb5eee0b525694837