在前端开发中，我们经常会遇到浏览器之间的兼容性问题，其中一个常见的问题就是浏览器的默认样式不同，导致页面在不同浏览器下的展示效果不一致。为了解决这个问题，很多前端工程师会使用 CSS Reset 来重置浏览器的默认样式。但是，有些开发者发现，在使用 CSS Reset 之后，在 IE 浏览器下会出现边距消失的问题。那么，CSS Reset 真的会让 IE 下的边距消失吗？本文将对这个问题进行详细探讨。
什么是 CSS Reset？
CSS Reset 是一种技术手段，它的作用是重置浏览器的默认样式，使得各个浏览器的默认样式一致，从而达到更好的页面展示效果。CSS Reset 的实现方式有很多种，其中比较常见的有 Eric Meyer 和 normalize.css 两种。
Eric Meyer 的 CSS Reset 是最早出现的一种 CSS Reset 方案，它的基本思路是将所有 HTML 元素的默认样式都设为相同的值，从而达到浏览器样式的一致性。normalize.css 则是一种更加轻量级的 CSS Reset 方案，它只针对一些常见的浏览器样式进行了重置，保留了一些有用的默认样式，从而更好地适应现代化的 web 开发。
为什么会出现 IE 下的边距消失问题？
在使用 CSS Reset 的过程中，有些开发者发现，在 IE 浏览器下会出现边距消失的问题。这是因为在 IE 中，元素的默认样式和其他浏览器有所不同。比如，在 IE 中，块级元素的 margin-top 和 margin-bottom 默认为 0，而其他浏览器中则为 16px。如果我们使用了 CSS Reset，将所有元素的 margin 和 padding 都设为 0，那么在 IE 中就会出现边距消失的问题。
如何解决 IE 下的边距消失问题？
为了解决 IE 下的边距消失问题，我们可以在 CSS Reset 的基础上，对 IE 中的默认样式进行重置。具体来说，我们可以使用以下代码：
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
/* IE 下的边距重置 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}在上面的代码中，我们首先使用了 CSS Reset，将所有元素的 margin 和 padding 都设为 0。然后，针对 IE 中的默认样式进行了重置，将所有元素的 margin、padding 和 border 都设为 0，将所有元素的字体大小和字体设置为继承，从而解决了 IE 下的边距消失问题。
总结
CSS Reset 是一种重置浏览器默认样式的技术手段，使用 CSS Reset 可以使得不同浏览器的样式一致，从而达到更好的页面展示效果。但是，在使用 CSS Reset 的过程中，有些开发者可能会遇到 IE 下的边距消失问题。为了解决这个问题，我们可以在 CSS Reset 的基础上，对 IE 中的默认样式进行重置。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6588f3faeb4cecbf2de1f852