在进行网页开发时，我们经常会遇到各种奇怪的样式问题。这些问题往往是由于不同浏览器对 CSS 样式的默认解析方式不同所致。为了解决这个问题，我们通常会使用 CSS Reset。
CSS Reset 是一种让所有浏览器都以一致的方式来处理 CSS 样式的技术方法。但是，即使使用了 CSS Reset，我们还是会遇到一些常见的误区，本文将对这些误区进行详细分析，并提供解决方法。
误区一：重置了太多样式导致页面变得难以预测
有些人会采用过于极端的 CSS Reset，将页面中的所有样式都进行了重置，这会导致页面变得很难预测。
例如，下面这个 Reset 就将所有的样式都进行了重置：
- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-这种方式确实可以让所有浏览器的样式表变得一致，但是会导致页面完全失去样式。
解决方法：
应该只重置必要的样式而不是全部重置。例如，下面的 Reset 只重置了块级元素的 margin 和 padding：
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- ----- ---------- ----- --------------- --------- ----------- ------------ -
误区二：忽略了通用样式
有些人会将 Reset 写在一些具体样式的后面，例如：
----- -- -
-------------- -----
---------- -----
-
-- ----- --
- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-这样做的问题是，Reset 下面的通用样式会覆盖掉上面的具体样式，导致样式失效。
解决方法：
应该将 Reset 写在样式表的最前面，这样 Reset 所有浏览器的默认样式之后，再对具体元素进行样式修饰。
-- ----- --
- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
----- -- -
-------------- -----
---------- -----
-误区三：忘记重置默认样式
有些人可能会认为，浏览器的默认样式并不会对排版造成影响，因此会忘记进行重置。
例如，浏览器会为表格添加间距，造成页面排版混乱，如下图所示：
解决方法：
需要针对特定的样式进行重置，例如，下面的 Reset 会重置表格的 margin 和 padding：
----- -
---------------- ---------
--------------- --
------- --
-------- --
-误区四：使用了过时的 CSS Reset
CSS Reset 技术也在不断地发展，现在的 Reset 一般都是用 Normalize.css 等现代 Reset 工具生成的。
有些人可能使用了过时的 Reset，例如 Eric Meyer 的 Reset，这种 Reset 将一些已经过时的元素样式进行了重置，例如 acronyms 和 big 元素。这些元素在现代 HTML5 中已经被废弃，因此 Eric Meyer 的 Reset 会对新的开发造成很大的困扰。
解决方法：
应该使用现代的 Reset 工具，例如 Normalize.css 等。
总结
正确使用 CSS Reset 是网页开发中一个非常重要的环节。本文详细分析了常见的 CSS Reset 误区，并提供了解决方法，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e4c6aff6b2d6eab303bc3c