作为前端开发者，你一定遇到过浏览器样式兼容的问题。虽然每个浏览器都有自己的默认样式，但它们的差异可能会导致网页展示效果不同。为了解决这个问题，我们需要使用 CSS Reset。
CSS Reset 是什么？
CSS Reset 是一种将 HTML 元素的默认样式重置为一致的方法。它能够消除不同浏览器之间的差异，让我们从一开始就拥有完全自由地掌控元素样式的能力。
- 样式兼容性不同
不同浏览器之间的样式兼容性不同。比如一些浏览器会为 ul 添加注释样式。如果我们没有使用 CSS Reset，它们的默认样式会影响我们的页面展示效果。
- 自由掌控样式
使用 CSS Reset 可以让我们从一开始就拥有完全自由地掌控元素样式的能力，不必考虑不同浏览器对样式的默认设置。我们可以根据自己的需求来修改元素样式。
- 提高开发效率
如果我们从头开始编写样式，需要一遍又一遍地调整浏览器样式，消耗了我们很多时间和精力。而使用 CSS Reset 可以让我们快速地创建页面，提高开发效率。
常用的 CSS Reset
常见的 CSS Reset 已经被大多数开发者所使用，以下是其中一些常用的 CSS Reset：
- Eric Meyer’s Reset CSS
// javascriptcn.com 代码示例
/* Eric Meyer’s Reset CSS */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}- Normalize.css
// javascriptcn.com 代码示例
/* Normalize.css */
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
…总结
使用 CSS Reset 是提高页面兼容性、增加样式掌控自由度以及提高开发效率的好方法。我们可以使用已经存在的常见 CSS Reset 或者自己编写一份 Reset CSS，来消除浏览器样式之间的差异。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653ab07f7d4982a6eb4dfad2