在前端开发中，为了兼容不同浏览器的样式差异，很多开发者选择使用 CSS Reset 来重置页面样式。虽然使用 CSS Reset 可以清除默认样式，但有时候会出现页面空白的问题。这篇文章将会分析这个问题并提供解决方案。
问题分析
当我们在页面中引入 CSS Reset 的时候，会将页面的默认样式全部清除。例如下面这个样例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
----- ---------------- -----------------
-------
------
--------- ----------
-------
-------reset.css 文件内容如下：
/* CSS Reset */
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; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }在引入了 CSS Reset 后，我们发现页面中的内容并没有显示出来。这是因为所有的元素都被设置为了 0，导致页面内容不可见。
解决方案
1. 添加基础样式
为了解决这个问题，我们需要向重置样式表添加一些基础样式，使得页面内容能够正常显示。我们可以为 body 标签设置一些基础样式，如下所示：
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}在添加了这些基础样式后，页面的内容应该能够正常显示出来。
2. 使用 Normalize.css
另一个解决方案是使用 Normalize.css，它是一种更加彻底的重置方式。与 CSS Reset 不同的是，Normalize.css 保留了一些有用的默认样式，同时修复了一些浏览器的样式差异。
Normalize.css 的使用方法和 CSS Reset 类似，只需在页面中引入样式表即可：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
----- ---------------- ---------------------
-------
------
--------- ----------
-------
-------3. 自定义样式
除了上面两种解决方案之外，我们还可以自己编写重置样式表，在其中添加一些基础样式来解决空白页面问题。
以下是一个简单的自定义样式表示例：
-- -------------------- ---- -------
-- ------ ----- --
---- -
----------- -----------
-
-- --------- ------- -
----------- --------
------- --
-------- --
-
---- -
------------ ------ -----------
---------- -----
------------ ----
------ -----
----------------- --------
-结论
使用 CSS Reset 可以帮助我们在不同浏览器中展示相同的样式，但在使用过程中可能会出现页面空白的问题。为了解决这个问题，我们可以添加一些基础样式，使用 Normalize.css 或者自定义样式表。
无论使用哪种方法，我们都需要理解样式的继承、层叠以及优先级等概念。这样才能更好地处理这种问题，并且编写出高质量的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67529eac8bd460d3ad968afd