解决 CSS Reset 带来的一些常见问题

什么是 CSS Reset？

在浏览器渲染网页时，每个浏览器都会有默认的 CSS 样式设置。但是不同的浏览器默认样式的表现不一样，为了让不同浏览器在显示网页时表现相同，就需要为网页进行 CSS Reset。如何看待 CSS Reset 是一个比较大的话题，这里不再详细阐述。本文将重点解决 CSS Reset 带来的一些常见问题。

CSS Reset 带来的问题

虽然使用 CSS Reset 能够让不同浏览器渲染网页的样式表现相同，但是 CSS Reset 也会带来一些问题。比如会对一些默认样式的网站造成影响，也会让某些标签的样式表现出现错误。

1. 对一些默认样式网站造成影响

一些网站通过设置默认样式使得页面看起来更加美观。比如淘宝的页面就有一些美丽的默认样式。但是使用 CSS Reset 后，淘宝页面的美丽样式就会丢失。这时候我们该怎么做呢？

解决方法：在 CSS Reset 后添加下面的代码片段。

html,body {
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
}

这样做就可以解决一些默认样式网站出现的问题了。

2. 所有标签的默认样式表现不一样

在使用 CSS Reset 后，所有浏览器的标签的默认样式表现都将接近于无样式状态，这样就容易出现一些样式表现错误的情况。

比如我们想要给一个 <a> 标签设置样式时，会发现设置的样式只能作用于文本部分，而不是整个标签。这时候需要我们添加以下代码片段，让 <a> 标签以块级元素进行显示。

a {
    display: block;
}

总结

在使用 CSS Reset 的同时，我们还需要注意到一些可能带来问题的情况。本文介绍了两种情况，其中一种是默认样式网站造成的影响，我们可以通过设置 html,body 标签的样式来进行解决。另一种是标签的默认样式表现不一样，我们可以通过设置标签的 display 属性来解决。

当然，在 CSS Reset 的使用过程中，也需要结合具体情况进行判断。希望本文对大家能有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a12a9948841e9894d6fd1e