使用Normalize.css重置默认样式

时间：2024-03-12 08:35:25

CSS重置有助于根据所有设置的样式建立一个基准样式。样式重置有效重写了浏览器某些元素（在浏览器里有很大的不同）默认的样式。

尽管CSS resets在过去的几年里很受欢迎，但是，很多网站至今也没有使用，这些网站CSS的可扩展性因css resets会有很大的困难。

大多数人推荐使用normalize.css重置默认样式，而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset。Normalize.css给所有浏览器的元素设置了一个共同的样式，而不是重置了这些元素的基本样式。可以参考github上normlize.css项目，它具有以下优点，不仅仅是CSS样式重置：

  • 不像其他CSS resets，normalize.css保存了有用的默认设置
  • 大范围的规范了HTML元素样式
  • 纠正了浏览器间的一些bug及不一样的表现形式
  • 精心的改进提高了可用性
  • 使用详细的注释解释了代码的作用

使用normalize.css替代一个标准的reset会使你编写正确的代码，在重新设置基本样式上节省大量的时间。

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/*更正 ie8、ie9中未定义block元素显示*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
/*更正 ie8、ie9中未定义inline-block元素显示*/
audio, canvas, video { display: inline-block; }
/*防止现代浏览器将没有controls属性的audio元素显示出来,移除iso 5设备中多余的高度*/
audio:not([controls]) { display: none; height: 0; }
/*矫正ie8，ie9中hidden属性不起作用的问题*/
[hidden] { display: none; }

/*将默认字体设成sans-serif,在不禁止用户缩放的情况下避免iOS设备方向调整后自动校正字体大小*/
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/*移除缺省的外边距*/
body { margin: 0; }

/*校正‘outline’在Chrome和其他浏览器间的不一致*/
a:focus { outline: thin dotted; }
/*增强在所有浏览器中聚焦和鼠标悬停时的可读性*/
a:active, a:hover { outline: 0; }
/*校正 Firefox 4+，Safari 5 和 Chrome 中‘section’和‘article’内的‘h1’字体大小*/
h1 { font-size: 2em; margin: 0.67em 0; }
/*Address styling not present in IE 8/9, Safari 5, and Chrome.校正IE 8/9， Safari 5 和 Chrome中样式不呈现的问题*/
abbr[title] { border-bottom: 1px dotted; }
/*校正 Firefox 4+， Safari 5 和 Chrome 中‘bolder’的样式*/
b, strong { font-weight: bold; }
/*校正 Safari 5 和 Chrome 中样式不呈现的问题*/

dfn { font-style: italic; }
/*校正 Firefox和其他浏览器 中样式不一致的问题*/
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
/*Address styling not present in IE 8/9.校正 IE 8/9 中样式不呈现的问题*/
mark { background: #ff0; color: #000; }
/*更正 Safari 5 和 Chrome 中奇怪的字体设置*/
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
/*增强所有浏览器中预格式化文本的可读性*/
pre { white-space: pre-wrap; }
/* 设置一致的引用类型*/
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
/*校正所有浏览器中易变且不一致的字体大小*/
small { font-size: 80%; }
/*防止所有浏览器中的‘sub’和‘sup’影响到行高（line-height）*/
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/*移除在 IE 8/9 中嵌入到‘a’元素时的边框 */
img { border: 0; }
/*更正 IE 9 中奇怪的‘overflow’表现 */
svg:not(:root) { overflow: hidden; }
/*更正 IE 8/9 和 Safari 5 中外边距不展示的问题*/
figure { margin: 0; }
/*定义一致的边框、外边距和内边距*/
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
/*1. 更正 IE 8/9 中颜色不继承的问题  2. 移除内边距确保人们在将fieldset设置为0时不会大跌眼镜*/
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
/* 1. 更正所有浏览器中字体不继承的问题 2. 更正所有浏览器中字号不继承的问题 3. 更正 Firefox 4+， Safari 5 和 Chrome 中外边距不同的问题*/
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }
/*更正 Firefox 4+ 用户代理样式表（UA stylesheet）中在‘input’上,设置‘line-height’时使用‘!important’的问题*/
button, input { line-height: normal; }
button, select { text-transform: none; }
/*1. 避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的‘audio 和‘video’控制器 2. 更正 iOS 中无法设置可点击的‘input’的问题3. 增强图片类型以及其他类型的‘input’中指针的可用性以及样式的一致性*/
button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
/*重置disabled元素的默认指针样式*/
button[disabled], html input[disabled] { cursor: default; }
/* 1. 调整 IE 8/9 box sizing 被设置为 ‘content-box’ 的问题 2. 移除 IE 8/9 中多余的内边距*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
/*1. 校正 Safari 5 和 Chrome 中 ‘appearance’ 被设置为 ‘searchfield’ 的问题 2. 校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题(include `-moz` to future-proof)*/
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }
/* 移除 OS X 中 Safari 5 和 Chrome 内部的内边距以及搜索框的取消按钮 */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
/*移除 Firefox 4+ 内部的内边距*/
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
/*1. 移除 IE 8/9 中默认的垂直滚动条 2. 增强所有浏览器中的对对齐以及可读性 */
textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }
/*移除单元格间大部分的间距*/
table { border-collapse: collapse; border-spacing: 0; }

 

相关文章