一份较好的 CSS Reset 代码解决 IE9 下零边距的问题
前言
在开发前端页面时，经常会使用 CSS Reset 重置默认样式，让页面样式统一并提高样式的可定制性。但是在 IE9 中，使用 CSS Reset 可能会出现零边距的问题，本文将介绍一份较好的 CSS Reset 代码解决这个问题。
CSS Reset 的作用
在浏览器中，每个标签都有默认的样式，不同的浏览器还有不同的默认样式。这就会导致开发者在使用 CSS 时，发现页面的样式不一致，难以进行二次开发和维护。因此，CSS Reset 出现了。CSS Reset 会把所有标签的默认样式都重置为一致的样式，开发者可以根据自己的需求定义一套默认样式，从而统一页面风格，提高样式的可定制性。
IE9 下的问题
在 IE9 中，使用 CSS Reset 可能会出现零边距的问题。这是因为 IE9 会把 margin 和 padding 的默认值设置为 0，导致页面上的元素之间没有边距，看起来会很拥挤。
解决方案
一份较好的 CSS Reset 代码解决 IE9 下零边距的问题如下：
-- -------------------- ---- -------
-- ----- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ----- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- -- -- -- --- ------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-这是比较常用的一份 CSS Reset 代码，其中 margin 和 padding 设置为 0，可以解决 IE9 下零边距的问题。另外，还将一些标签的默认样式都设置为 0，提高二次开发和维护的可定制性。需要注意的是，对一些标签的默认样式进行定义之后，可能会对页面的布局产生影响，需要进行适当的调整。
总结
CSS Reset 可以让页面的样式更加统一，并提高样式的可定制性。但在 IE9 中会出现零边距的问题，需要进行调整。一份较好的 CSS Reset 代码解决 IE9 下零边距的问题如上所述，希望能对大家的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d253e48841e98949ddec4