Normalize.css做了哪些事情--看代码

博主说：本博客文章来源包括转载，翻译，原创，且在文章内均有标明。鼓励原创，支持创作共享，请勿用于商业用途，转载请注明文章链接。本文链接：http://www.kein.pw/?p=80

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
HTML5新标签display属性定义
========================================================================== */

/**
* 为 IE 8/9定义新的块状元素.
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}

/**
*为 IE 8/9定义新的inline-block元素.
*/

audio,
canvas,
video {
display: inline-block;
}

/**
* 防止现代浏览器在显示audio的时候没有控制条
* 移除在iOS5设备中多出的高度
*/

audio:not([controls]) {
display: none;
height: 0;
}

/**
* 修正IE 8/9不支持的属性
*/

[hidden] {
display: none;
}

/* ==========================================================================
Base
========================================================================== */

/**
* 1. 设置默认字体为 sans-serif.
* 2. 组织iOS方向变化后的字体调整，但不禁止用户缩放.
*/

html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}

/**
* 移除默认外边距.
*/

body {
margin: 0;
}

/* ==========================================================================
Links
========================================================================== */

/**
* 统一所有浏览器的链接焦点虚线框.
*/

a:focus {
outline: thin dotted;
}

/**
*提升所有浏览器中链接焦点和鼠标划过后的可读性
*/

a:active,
a:hover {
outline: 0;
}

/* ==========================================================================
Typography
========================================================================== */

/**
* 统一h1在不同浏览器中具有不同的字号和外边距 Firefox 4+, Safari 5, and Chrome.
*/

h1 {
font-size: 2em;
margin: 0.67em 0;
}

/**
* 修正不支持的属性 IE 8/9, Safari 5, and Chrome.
*/

abbr[title] {
border-bottom: 1px dotted;
}

/**
* 修正b,strong的加粗样式为bold in Firefox 4+, Safari 5, and Chrome.
*/

b,
strong {
font-weight: bold;
}

/**
* 修正不支持属性 in Safari 5 and Chrome.
*/

dfn {
font-style: italic;
}

/**
* 统一火狐与其它浏览器的样式
*/

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}

/**
* 修正不支持属性 in IE 8/9.
*/

mark {
background: #ff0;
color: #000;
}

/**
* 修正奇葩字体设定 in Safari 5 and 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` 的影响 all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

/* ==========================================================================
Embedded content
========================================================================== */

/**
*移除边框 in IE 8/9.
*/

img {
border: 0;
}

/**
*修正显示怪异 in IE 9.
*/

svg:not(:root) {
overflow: hidden;
}

/* ==========================================================================
Figures
========================================================================== */

/**
* 修正不支持属性 IE 8/9 and Safari 5.
*/

figure {
margin: 0;
}

/* ==========================================================================
Forms
========================================================================== */

/**
* 定义一致的边框，外边距，内边距 border, margin, and padding.
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

/**
* 1.修正color没有继承 in IE 8/9.
* 2.移除内边距，防止属性归零时不出纰漏
*/

legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}

/**
* 1. 修正字体不能继承 in all browsers.
* 2.修正字号不能继承 in all browsers.
* 3. 统一不同的外边距 in Firefox 4+, Safari 5, and Chrome.
*/

button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}

/**
* 修正 Firefox 4+ 默认的!important设置
*/

button,
input {
line-height: normal;
}

/**
* 修正`button` 和`select`的text-transform属性遗传不一致
* 所有其他form控制元素不继承 `text-transform` 的值.
* 修正 `button`样式遗传 in Chrome, Safari 5+, and IE 8+.
* 修正`select` 样式遗传 in Firefox 4+ and Opera.
*/

button,
select {
text-transform: none;
}

/**
* 1. 避开 WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. 修正iOs中无法给可点击的input添加样式的问题
* 3. 提高type属性为image的input元素鼠标指针的可用性和一致性
*/

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}

/**
* 重置不可操作元素的默认鼠标指针
*/

button[disabled],
html input[disabled] {
cursor: default;
}

/**
* 1.修正type属性为 `content-box`的box-sizing样式 in IE 8/9.
* 2. 移除多余的padding in IE 8/9.
*/

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}

/**
* 1. 修正搜索框的 `appearance` 属性in Safari 5 and Chrome.
* 2.修正 `box-sizing` 属性 `border-box` in Safari 5 and Chrome
* (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;
}

/**
*移除内边距和取消搜索按钮in Safari 5 and Chrome
* on OS X.
*/

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
* 移除边框和内边距in Firefox 4+.
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

/**
* 1.移除默认的竖向滚动条 in IE 8/9.
* 2.提高可读性和对齐 in all browsers.
*/

textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}

/* ==========================================================================
Tables
========================================================================== */

/**
* 移除大多数单元格中的的空格.
*/

table {
border-collapse: collapse;
border-spacing: 0;
}

巴特西

Normalize.css做了哪些事情--看代码

最新文章

热门文章