Normalize.css 支持 HTML5 的CSS Reset

原文：http://www.aiubug.com/?p=537

(转)Normalize.css 支持 HTML5 的CSS Reset

转载自：Hi, laser! @44ux.com

Bootstrap 更新之后，新版CSS Rest增色不少，而姬光同学的注释版更是让人颇为赞叹，故转之。

Nomalize.css 是一个支持 html5 标准的 CSS Rest，可以页面中的元素在各浏览器中表现尽量一致。目前 nomalize.css 有两个版本，一个版本包含了支持旧浏览器的 reset，另外一个版本只支持 IE 8+, Firefox 4+, Safari 5+, Opera, Chrome，这两个版本都可以在 官方网站 上下载。

这里 laser 取最新的2.0.1版本，将其中的注释简单翻译一下，方便大家学习。

/*! normalize.css v2.0.1 | MIT License | git.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;
}

这个版本并没有包含IE6/7等古老的浏览器，感兴趣的同学可以下载1.0.1版。