CSS Reset 是一种常用的前端技术，它可以清除浏览器样式的默认值，避免不必要的排版和样式问题。然而，有时候 CSS Reset 也会为我们带来一些问题，导致浏览器不兼容。这篇文章将会讨论如何解决 CSS Reset 带来的浏览器不兼容问题，同时提供一些详细的示例代码，以供参考。
问题描述
CSS Reset 的主要目的是为了确保在所有浏览器上呈现的效果是一致的。但是，尽管这种方法在某些情况下很有效，但它并不总是万无一失。其中最大的问题在于它可能会影响到浏览器样式的渲染，导致网页呈现异常。常见的具体问题有以下几个方面：
样式冲突：CSS Reset 使用了很多全局样式，这些样式可能与网页自身的样式发生冲突，从而导致某些元素的样式异常。
体验问题：CSS Reset 大多是为了确保网页在所有浏览器上呈现出一致的效果，但这也会带来用户体验方面的问题。如一些网页上本身存在的浏览器样式，其可能是浏览器根据用户偏好自行渲染的，而在某些情况下并不需要 Reset。
代码复杂性：CSS Reset 中使用了很多 CSS 选择器，导致了其代码非常复杂。如果应用于所有的元素，则可能产生很多不必要的冗余代码，从而增加了加载时间。
解决方案
虽然 CSS Reset 带来的问题可能会导致浏览器不兼容，但这并不意味着我们需要彻底放弃 CSS Reset。我们可以通过以下几种方法来减少其带来的不兼容问题，以保证网页的正常呈现。
选择正确的 Reset
CSS Reset 有很多不同的方法，如 Eric Meyer 的 Reset、Normalize.css 和 Bootstrap 等，每一种 Reset 都有其自己的优缺点。因此，在选择 Reset 时，我们需要依据实际情况做出决策。如果我们只是想尽量减少浏览器渲染的差异，那么可以采用 Normalize.css 这样的现代化 Reset。如果我们在构建 Web 应用程序，那么较为复杂的 Bootstrap Reset 可以更好地满足我们的需求。选择正确的 Reset 会避免很多不必要的问题。
避免 Reset 的视觉影响
在应用 Reset 时，我们需要记住该 Reset 的作用和影响范围。较小的 Reset 可以避免改变主题元素的视觉表现，但它们也可能影响到浏览器样式的渲染。重置样式表样式项，而避免影响元素的视觉表现。例如，以下 Reset 只会影响元素的上下边距：
* {
margin-top: 0;
margin-bottom: 0;
}使用条件 Reset
在一些情况下，我们只想针对特定的元素，尤其是布局元素，应用 Reset。这种情况下，我们可以使用条件 Reset。这种方法适用于我们只希望重置特定元素而不是全局样式的情况。例如，我们可以在某些布局容器的样式表中加入以下代码，只为关键的元素应用 Reset：
.my-container * {
box-sizing: border-box;
}避免 Reset 的继承
CSS 样式具有一定的继承性，经过 Reset 后，某些元素的 CSS 样式仍然相互继承。从而可能导致 Reset 无法完全清除浏览器缺省样式，影响元素样式的渲染。为了避免这种情况，我们可以使用 * selector 来避免元素继承原本的 CSS 规则。例如，以下的 Reset 避免了字体继承造成的问题：
* {
font-family: initial;
}结论
CSS Reset 在很多情况下可以减少浏览器渲染的差异，从而避免兼容性问题；但有些情况下我们也需要考虑一些相关的问题，避免使用方式错误。本文提供了一些解决 CSS Reset 带来的浏览器不兼容问题的有效方法，让我们能够在保持网页一致呈现的同时，也能够避免一些兼容性问题。
示例代码：https://codepen.io/flylemon/pen/oNjzMyX
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c3d0ca336082f253f45fe