怎样解决使用 CSS Reset 后样式不生效的问题？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常使用 CSS Reset 来重置默认的样式，以解决不同浏览器之间的样式差异问题。然而，在使用 CSS Reset 时，却经常遇到样式不生效的问题。本文将详细介绍这种问题的原因，以及如何解决这一问题。

问题原因

当我们使用 CSS Reset 后，页面的样式会变得非常“干净”，所有的默认样式都会被清除，包括字体、边框、外边距等等。然而，在一些特殊情况下，我们期望某些默认样式能够保留，以便我们能够根据需求进行调整。这时，我们就需要解决 CSS Reset 后样式不生效的问题。

具体来说，CSS Reset 主要通过以下两个方式来清除默认样式：

全部元素样式重置
某些元素样式部分重置

在第一种情况下，我们可能会发现一些默认样式丢失，因为这些样式在 CSS Reset 中被移除了。而在第二种情况下，则需要手动添加一些样式规则，以保留或重置某些元素的样式。

解决方案

方案一：盒子模型重置

在 CSS Reset 中，最常用的就是盒子模型的重置。这是因为不同浏览器对盒子模型的解释存在差异，导致在布局上出现问题。比如，IE6/7 在解析盒子模型时，会将“边框”和“内边距”都算入盒子的总宽度，而其他浏览器则只包括“内边距”和“内容宽度”。

为了解决这一问题，我们通常会将盒子模型样式定义为：

* {
    box-sizing: border-box;
}

这样，每个元素在布局时，都会将“边框”和“内边距”计算在内，避免出现布局上的问题。但是，当我们遇到某些元素需要使用默认的盒子模型时，比如图片、表格等，可能会出现样式不生效的问题。

解决这个问题的方法很简单，只需要将这些元素的盒子模型样式重新定义为“内容宽度”，即可保留它们的默认样式：

img,
table {
    box-sizing: content-box;
}

这样，这些元素的默认样式就能够被保留，并且不会受到 CSS Reset 影响。

方案二：逐个元素重新定义样式

在 CSS Reset 后，我们还可以通过逐个元素重新定义样式的方法，来保留或重置某些元素的默认样式。比如，如果我们需要保留表单元素的默认样式，可以使用以下样式：

input[type="text"],
input[type="password"],
textarea,
select {
    /* 这里是表单元素的默认样式 */
}

这样，这些表单元素的默认样式就能够被完整地保留，并且不会受到 CSS Reset 影响。

当然，这种方法需要我们逐个元素地定义样式规则，相对来说比较麻烦。因此，我们可以将这些样式规则组合成一个 CSS 类，然后在需要的时候为元素添加这个类：

.form-default {
    /* 这里是表单元素的默认样式 */
}

<input type="text" class="form-default">
<input type="password" class="form-default">
<textarea class="form-default"></textarea>
<select class="form-default"></select>

这样，同样能够保留表单元素的默认样式，而且更加方便和灵活。

总结

在前端开发中，我们经常使用 CSS Reset 来解决不同浏览器之间的样式差异问题。然而，在使用 CSS Reset 时，我们也经常遇到样式不生效的问题。针对这个问题，本文介绍了两种解决方案，分别是盒子模型重置和逐个元素重新定义样式。掌握了这两种方法，相信能够更好地运用 CSS Reset，进一步提高前端开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530edd87d4982a6eb27f84e