前言
虽然 IE6 已经面临淘汰，但是仍然有很多公司和项目在使用它。同时，也不乏一些老的网站或者应用需要在 IE6 上支持一些基本的功能。而在这样的环境下使用 CSS Reset，可以有效解决 IE6 中的 CSS 兼容问题，提高界面的统一性和美观度。
什么是 CSS Reset
CSS Reset 可以理解为一份 CSS 样式表，它的主要作用是将 HTML 元素的默认样式归零，在使用自定义样式时不受浏览器默认样式的干扰。CSS Reset 的功能在 CSS Framework（如Bootstrap）中得到了广泛应用，也是 Web 开发中的一个重要技术点。
在 IE6 中使用 CSS Reset 的问题
由于 IE6 本身对 CSS 的语法支持存在问题，我们在使用 CSS Reset 的时候也需要注意一些要点，否则会引起一些比较奇怪的问题。
- CSS 选择器支持的问题。
在 IE6 中，以下的选择器是不被支持的：
- 属性选择器（例如
input[type=radio]） - 伪类选择器（例如
:hover、:active等） - 相邻兄弟选择器（例如
+） - 通用选择器（例如
*）
当然，我们可以通过 document.createElement() 和 DOM 操作来实现部分CSS 选择器的效果。但是这样会大大增加前端代码的复杂度，同时也会影响页面的性能。
- IE6 中的浮动问题
IE6 中对于浮动元素的解析有一些奇怪的问题，例如 父元素没有设置宽度的时候，子元素即便设置了浮动也不会与其变成一行。而 CSS Reset 中有一些元素（如 div）会被设置为浮动，这会导致相应的样式问题。
- 元素默认样式的问题
在 IE6 中，一些元素的默认样式和一般的浏览器有所不同，例如：
- 标题元素（h1-h6）在 IE6 中没有明显的加粗效果。
- 表格元素（table、tr、td）在 IE6 中默认没有 border-spacing 属性。
- form 元素在 IE6 中会默认添加 2px 的 border。
这些差异会对 CSS Reset 的使用造成一定的影响。
如何正确使用 CSS Reset
根据上述问题，我们需要注意以下要点，以保证在 IE6 中正确地使用 CSS Reset。
- 限制使用CSS选择器
在编写CSS Reset时，要尽量避免使用 IE6 不支持的选择器，比如属性选择器、伪类选择器等。这样可以避免浏览器解析上的问题，同时也会减少浏览器的要求，减小页面性能的负担。
- 添加 IE6 专用的 Reset 样式
可以通过条件注释，添加一个专门针对 IE6 的 Reset 样式表。其中包含了一些特殊的样式，如设置 h1 标题为加粗，去掉 input 的边框等。例如：
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"/> <![endif]-->
- 避免对浮动元素添加样式
在对元素进行 Reset 的时候，尽量避免对浮动元素添加样式，以避免因为 IE6 的浮动处理问题而导致的布局混乱。
示例代码
下面是一个简单的 CSS Reset 样式表，其中遵循了上述的要点：
-- -------------------- ---- -------
-- --- ----- --- --- --
-- ------- --------- --
----- --- --- --- --- --- ---
--- --- --- --- --- --- --
----------- --------
----- --------- ------- ------
--------- ------- ------- ------ -
------- --
-------- --
------- --
---------- -----
------------ -------
----------- --------
--------------- ---------
-
-- --- --- ---- ----- --
- ---- ---
- ---- ---
- ---- ---
- ---- ---
- ---- ---
- ---- -- -
------------ -----
-
- ---- ----- -
------- -----
-
-- ----- -------- -------- --
--------------- -
-------- ----
-------- ------
------- --
----------- -------
------ -----
-总结
在 IE6 中正确地使用 CSS Reset，在一定程度上可以解决跨浏览器的样式兼容问题，让网站的效果更加统一，提供更好的用户体验。但是在使用 CSS Reset 的过程中，要注意兼容性问题，以避免增加前端的复杂度和降低页面的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e56f04f6b2d6eab30ddb84