当我们在开发网页时，不同的浏览器对 CSS 的解析规则可能会有所不同，这可能会导致我们的页面在不同浏览器上的效果存在差异。为了解决这个问题，开发人员们提出了 CSS Reset 与严格模式。
CSS Reset
CSS Reset 是一种技术，它通过在页面加载时强制浏览器对元素样式进行重置，从而实现在不同浏览器上展现相同的元素样式。具体而言，CSS Reset 会将 HTML 元素的默认样式全部清除，并通过特定的样式规则重新设置元素的样式，以便开发者可以在不同浏览器上获得一致的元素呈现效果。
CSS Reset 的作用
CSS Reset 的主要作用是解决浏览器兼容性问题，实现跨浏览器口味的一致性。通过 CSS Reset 技术，开发人员不再需要为了消除浏览器兼容性问题而写太多的特定于某个浏览器的 CSS 代码。
CSS Reset 的实现方法
下面是一个简单的 CSS Reset 的实现方法：
-- -------------------- ---- ------- -- ------ -- - - -------- -- --------- -- -------- -- ----------- ----- ------ -------- ---------------- --------- - ---- - ------------- -- - --- -- - ------------ ----- - -- -- ---- ---- -- ----------- - - -------- ----- - ------------------ ----------------- --------- ------- - --------- --- --------- ----- - ----- - ----------------- --------- ---------------- -- -
上面的代码中，我们通过 * 选择器来选择所有 HTML 元素，然后将 margin、padding、border、line-height 等元素的属性全部设置为 0。在处理 HTML 元素的样式时，我们将样式全部设置为 none。这样，我们就可以通过 CSS Reset 来避免由于浏览器差异而导致的样式问题了。
严格模式
严格模式是另一种解决浏览器兼容性问题的技术。在严格模式下，浏览器会以一种更为严格的方式解析 CSS 代码，让 HTML 文档的解析更加一致。
严格模式的作用
严格模式的主要作用是帮助开发人员尽可能正确地编写 HTML 代码，从而减少浏览器解析 HTML 代码时出现的问题。同时，严格模式还可以让浏览器提高页面渲染的速度，加速页面的加载。
严格模式的实现方法
通过向 HTML 文档中添加一行代码，就可以开启严格模式：
<!DOCTYPE html>
这行代码可以放在 HTML 文档的第一行，也可以放在 HTML 的 head 中。在 HTML 5 中，这行代码可以被省略。当省略时，浏览器会以默认的方式进行解析。
总结
CSS Reset 和严格模式都是用来解决浏览器兼容性问题的技术。CSS Reset 通过重置 HTML 元素的样式来实现页面的一致性，严格模式则通过提高浏览器解析 HTML 代码的标准来保证屏幕渲染的一致性。开发人员可以根据项目需求来选择适合自己的方法。最佳实践则建议同时使用这两种技术，以获得最佳的效果。
带有 CSS Reset 和严格模式的 HTML 代码示例如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- -------------------- ------- ---------------- ---- --- ----- -- -- --- - ---------- -- ----------- -- ---------- -- ------------- ----- -------- -------- ------------------ --------- --- ------ - --------------- -- --- ----- -- - -------------- ----- --- ------------- - - ---------- ----- --- -------------------- ----------------- ----------- ------- - ----------- --- ----------- ----- --- ------- - ------------------- --------- ------------------ -- --- ---- ------ -- ------ - -------------------- ----- --------------- ----------- ------------- ----- --------- ----- --- -------- - -------------------- ----- ---------- ----- --------------- ----- --------- ----- -------------- ------- ------------- ----- --------------- ----- --- --------- - ----------- ----- -------------------- ----- -------------- ----- --- ---- - ------------- ----- ----------------- ----- --- --- - --------------- ---- ----------------- ----- --- ---- -- - ----------------- ---- --- --------- - -------------- ------- ------------- ----- -------------- ----- ------------------ ----- --- --------- ------- ------ ---------------------- ---------- ----------------- ---------------- ------------------ ------ -------------------- ---------------------- ------- ----------- -------- --------------------- ------------- ------- -------
以上示例展示了一个简单的网页，该网页带有 CSS Reset 和严格模式，以获得更加一致的页面呈现效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c66ef48841e9894ac1377