Normalize.css ——CSS Reset的友好替代品

/*! normalize.css v2.0.1 | MIT License | [git][4].io/normalize */   /* ========================================================================== HTML5 display definitions ========================================================================== */   /* * 更正IE 8/9中未定义的‘block’元素显示。 */   article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }   /* * 更正IE 8/9中未定义的‘inline-block’元素显示 */   audio, canvas, video { display: inline-block; }   /* * 防止现代浏览器将没有controls属性的的‘audio’元素显示出来 * 移除 iOS 5 设备中多余的高度 */   audio:not([controls]) { display: none; height: 0; }   /* * 校正IE 8/9中‘hidden’属性不起作用的问题 */   [hidden] { display: none; }   /* ========================================================================== 基本 ========================================================================== */   /* * 1. 将默认字体设置为 sans-serif * 2. 在不禁止用户缩放的情况下避免iOS设备方向调整后自动校正字体大小 */   html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ }   /* * 移除缺省的外边距 */   body { margin: 0; }   /* ========================================================================== Links ========================================================================== */   /* * 校正‘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; }   /* * 校正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; }   /* * 校正 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; white-space: pre-wrap; word-wrap: break-word; }   /* * 设置一致的引用类型 */   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; }   /* ========================================================================== Figures ========================================================================== */   /* * 更正 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; }   /* * 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], 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; }