使用Normalize.css重置默认样式
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; }