/** * 1. 更正所有浏览器中的行高。 * 2. 防止在 iOS 中方向更改后调整字体大小。 */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* 部分 ========================================================================== */ /** * 删除所有浏览器中的边距 */ body { margin: 0; } /** * 在 IE 中一致地渲染 `main` 元素。 */ main { display: block; } /** * 更正 Chrome、Firefox 和 Safari 中 `section` 和 `article` 上下文中 `h1` 元素的字体大小和边距。 */ h1 { font-size: 2em; margin: 0.67em 0; } /* 分组内容 ========================================================================== */ /** * 1. 在 Firefox 中添加正确的框大小。 * 2. 在 Edge 和 IE 中显示溢出。 */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. 更正所有浏览器中字体大小的继承和缩放。 * 2. 更正所有浏览器中奇怪的“em”字体大小。 */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* 文本级语义 ========================================================================== */ /** * 删除 IE 10 中活动链接的灰色背景。 */ a { background-color: transparent; } /** * 1. 删除 Chrome 57 中的底部边框- * 2. 在 Chrome、Edge、IE、Opera 和 Safari 中添加正确的文本装饰。 */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * 在 Chrome、Edge 和 Safari 中添加正确的字体粗细。 */ b, strong { font-weight: bolder; } /** * 1. 更正所有浏览器中字体大小的继承和缩放。 * 2. 更正所有浏览器中奇怪的“em”字体大小。 */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 在所有浏览器中添加正确的字体大小。 */ small { font-size: 80%; } /** * 防止 `sub` 和 `sup` 元素影响行高 所有浏览器。 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 嵌入内容 ========================================================================== */ /** * 删除 IE 10 中链接内图像的边框。 */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. 更改所有浏览器中的字体样式。 * 2. 在 Firefox 和 Safari 中删除边距。 */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * 在 IE 中显示溢出。 * 1. 在 Edge 中显示溢出。 */ button, input { /* 1 */ overflow: visible; } /** * 删除 Edge、Firefox 和 IE 中文本转换的继承。 * 1. 移除 Firefox 中文本转换的继承。 */ button, select { /* 1 */ text-transform: none; } /** * 更正 iOS 和 Safari 中无法设置可点击类型的样式。 */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * 移除 Firefox 中的内边框和内边距。 */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * 恢复上一条规则未设置的焦点样式。 */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * 更正 Firefox 中的填充。 */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. 更正 Edge 和 IE 中的文本换行。 * 2. 更正 IE 中 `fieldset` 元素的颜色继承。 * 3. 删除填充,这样开发人员在归零时不会被抓到 * 所有浏览器中的 `fieldset` 元素。 */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 在 Chrome、Firefox 和 Opera 中添加正确的垂直对齐方式。 */ progress { vertical-align: baseline; } /** * 删除 IE 10+ 中的默认垂直滚动条。 */ textarea { overflow: auto; } /** * 1. 在 IE 10 中添加正确的框大小。 * 2. 删除 IE 10 中的填充。 */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 更正 Chrome 中递增和递减按钮的光标样式。 */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. 更正 Chrome 和 Safari 中的奇怪外观。 * 2. 更正 Safari 中的轮廓样式。 */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * 在 macOS 上删除 Chrome 和 Safari 中的内部填充。 */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. 更正 iOS 和 Safari 中无法设置可点击类型的样式。 * 2. 在 Safari 中将字体属性更改为“继承”。 */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* 交互的 ========================================================================== */ /* * 在 Edge、IE 10+ 和 Firefox 中添加正确的显示。 */ details { display: block; } /* * 在所有浏览器中添加正确的显示。 */ summary { display: list-item; } /* 杂项 ========================================================================== */ /** * 在 IE 10+ 中添加正确的显示。 */ template { display: none; } /** * 在 IE 10 中添加正确的显示。 */ [hidden] { display: none; }