在我们开发 web 页面时，为了确保不同浏览器之间的表现一致，很多人会选择使用 CSS Reset。然而，有时候会因为某些原因导致在 IE 浏览器中出现了布局兼容性问题，这时候我们需要采取相应的解决方法。
问题描述
在使用 CSS Reset 后，我们常常会遇到一些与 IE 浏览器有关的兼容性问题，例如宽度、高度、边界等属性在 IE 中表现不一致。下面我们通过一个例子，详细介绍这些问题。
HTML 代码
<div class="box"></div>
CSS 代码
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}在使用这段 CSS 代码时，我们希望 .box 的宽度和高度都是 100px，并且其边界和内边距都是 10px，而 box-sizing 属性设置为 border-box ，以保证宽度和高度不会因为边界和内边距的增加而增加。
然而，当我们在 IE 浏览器中运行该代码时，我们会发现这个盒子的实际宽度和高度是不同的，如下图：
显然，我们想要的结果并不是这样的，然而这是在 CSS Reset 后常见的一种问题。
问题原因
大部分 CSS Reset 都会将元素的边界和内边距设置为 0，以及取消一些浏览器默认的样式。这些做法固然可以确保不同浏览器之间的表现一致，但是也会让我们的样式表和浏览器默认样式相去甚远。
在 IE 浏览器中，元素的宽度和高度默认会包含边界和内边距，因此当我们在这些属性上设置具体的值时，实际的宽度和高度就会增加，从而导致问题的出现。
解决方法
为了解决这个问题，我们可以采用以下两种解决方法：
1. 根据 IE 版本设置特定样式
在 IE8 及以下版本中，我们可以将 box-sizing 属性设置为 border-box 以保证元素宽度和高度不会因为边界和内边距的增加而增加。而在 IE9 及以上版本中，则可以将元素的 box-sizing 属性值设置为 inherit，以让它继承其父元素的 box-sizing 属性值。
例如：
-- -------------------- ---- -------
-- --- --- --- ----- --
---- -
------- ------ -- -- ---- --
-------- ------ -- -- ---- --
------- -----
-------- -----
------- --- ----- -----
------------------- ----------- -- -------------- ----- ------ --
---------------- ----------- -- -------- ----- ----- --
----------- ----------- -- -------- -- --
-
-- --- --- --- ----- --
------ ------ --- --------------- -
---- -
----------- --------
-
-这样做虽然比较麻烦，但是可以确保不同版本的 IE 浏览器都能正常显示元素。
2. 使用 IE Hack
IE Hack 是一种兼容性写法，利用 IE 中存在的一些 CSS 属性或者属性值来达到兼容的目的。使用 IE Hack 的方法也非常简单，只需要在样式表中加入一些针对 IE 的条件注释即可。
例如，在我们的示例代码中，可以这样写：
-- -------------------- ---- -------
---- -
------ ------
------- ------
------- -----
-------- -----
------- --- ----- -----
-- -- ---- --
------ --
--------- -------------
-这段代码中，我们利用了 IE8 及以下版本中存在的 * 属性的 hack，将元素的 zoom 属性设置为 1，再将其 display 属性设置为 inline-block，从而解决了布局兼容性问题。
总结
CSS Reset 可以确保不同浏览器之间的表现一致，但是也会给我们带来一些布局兼容性问题。因此在使用 CSS Reset 时，我们需要格外小心，特别是在兼容 IE 浏览器时更是如此。如果发现了问题，我们可以采取上述两种方法解决，以确保页面在各个浏览器中都能正常显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64705226968c7c53b0e734a3