Css Reset -Css样式重置

最新推荐文章于 2026-05-31 07:09:13 发布

原创最新推荐文章于 2026-05-31 07:09:13 发布 · 3.7k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

WEB前端

本文探讨了在不同浏览器中实现一致CSS样式的挑战，并介绍了CSS Reset的作用及其应用。通过使用Eric Meyer的CSS Reset方案，可以有效解决浏览器间的样式差异问题。

在网页实际开发过程中，如果将来网页的浏览者存在使用不同的浏览器(IE, Google, FireFox, Opera, Safari等)对网页进行解析展示的可能，那么我们就不得不从完美的理想预期中转回到本真的现实情况。在设计师们的梦想中都存在着一个十分完美的世界：所有的浏览器都能够理解和适用所有的CSS规则，并且呈现相同的视觉效果(不存在兼容性问题)。但是在实际环境中，在很多情况中事与愿违，很多的css样式在不同内核的浏览器中有着不同的解释和呈现，这就导致了您所期望的预期效果和浏览器解释的实际效果略有差异，这是因为HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别所造成。
为了去除不同的浏览器的默认样式之间存在的差异，尽量能让不同的css样式在不同的浏览器下遵循同一解析标准，我们现在提到的css reset就是用来重置（复位）元素在不同核心浏览器下的默认值。
那么reset css 究竟怎么写，都写些什么？这个规则没有统一标准，也没有权威指导，都是个人在开发过程中遵照自己的开发习惯以及元素样式的一些宏观表现酌情进行设置，形成一些个人的总结，具有明显的个人特点。**不论您有什么特别的特点，建议不要使用通配符（*）这样近乎破坏性的行为进行样式复位 **，浪费资源暂放其后，对于HTML默认的一些UI展示简直是一种侮辱。
在网上搜索css reset有好多关于样式复位的结果，拿来就可以使用（前提是对于自己正在写的结构没有不良影响）。再此不一一展示。就我个人在使用过程本人比较倾向于Eric Meyer这套初始化样式；
具体代码内容如下：

/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

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, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}