前端html5 CSS Reset 详细分析
HTML5 新模块元素的兼容问题
新增块元素的默认样式
下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式。为解决该问题，给下列元素添加“block”显示属性。
代码：
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
特殊新增块元素
下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式，考虑到其特殊性，特为下列元素添加“inline-block”显示属性。
代码：
audio,canvas,video {
display:inline-block;
*display:inline;
*zoom:1;
}
去除行内块元素之间的水平空隙方案
代码：
.display {
inline-block;
/* 此处原用于解决IE7兼容性问题，但是会导致background-image失效，请先忽略以下两条，实践中暂时没有发现IE7解决办法。若有发现请在留言处补充。谢谢！ */
/* *display:inline; */
/* *zoom:1; */
}
*关于inline-block的详细说明，点此详情。
*问题页面可参照本人从事的公司网站项目，IE7下样式有明显问题。
音频模块兼容性问题
代码：
audio:not([controls]) {
display: none; /*为防止在主流浏览器中出现“不带控制按钮的音频模块”这一问题。*/
height: 0; /*解决iOS5移动端显示多余高度的兼容性问题。 */
}
特殊模块样式处理
处理 不存在于 IE 8/9 的样式。
代码：
[hidden]{
display:none;
}
提高搜索优化
很多新增的HTML模块元素在搜索优化上也起到不可轻视的作用。
代码：
address { /* 屏幕阅读器和搜索引擎找到地址或电话号码，默认样式是 display: block */
display: block;
}
Global 全局基本设置
默认字体设置，边距设置
代码：
html {
font-family: sans-serif; /* 默认字体 */
font-size: 100%; /* 在用户调整窗口大小时，字体大小做相应调整。 */
-ms-text-size-adjust: 100%; /* IE浏览器 */
-webkit-text-size-adjust: 100%; /* FireFox浏览器 */
overflow-y: auto;
}
去除默认边距
代码：
body{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
border: 0; /* 边框 */
}
链接相关样式
代码：
a {
text-decoration: none; /* 去除默认下划线 */
}
a:focus {
outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */
}
a:active, a:hover {
outline: 0;
}
排版相关样式
代码：
h1 { /* 使h1标签在section标签和article标签的留白和字体样式统一。可同时兼容Firefox 4 、Safari 5和Chrome等不同的浏览器 */
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
/* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */
}
b,
strong {
font-weight: bold; /* 添加加粗样式，应用于Firefox 4 、Safari 5和Chrome */
}
dfn {
font-size:italic; /* 添加斜体样式，应用于Safari 5和chrome */
}
hr { /* 解决其在Firefox中的兼容性问题 */
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark { /* 解决其在IE8/9中样式未定义的问题 */
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp { /* 更正关联字体在Safari 5和Chrome中的老式设置 */
font-family: monospace, serif;
font-size: 1em;
}
pre { /* 提高pre标签格式化文本在所有浏览器中的可读性 */
white-space: pre-wrap;
}
q { /* 设置相一致的引号类型 */
quotes: "\201C" "\201D" "\2018" "\2019";
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
small { /* 统一所有浏览器中字体大小不一致的兼容性问题 */
font-size: 80%;
}
sub,
sup { /* 在所有浏览器中，防止“sub”和“sup”标签影响“line-height”属性 */
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
small {
font-size: 85%;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
cite {
font-style: normal;
}
ul,ol {
padding: 0;
margin: 0 0 10px 25px;
}
dl {
margin-bottom: 20px;
}
li {
line-height: 20px;
}
dt,
dd {
line-height: 20px;
}
dt {
font-weight: b d;
}
dd {
margin-left: 10px;
}
* 内嵌文本相关样式
代码：
img {
border: 0; /* 在IE8/9浏览器中，当img标签中包含a标签时，去除img边框属性。 */
}
svg:not(:root) {
overflow: hidden;
}
图片特写相关样式
"figure"标签规定独立的流内容（图像、图表、照片、代码等等）
代码：
figure {
margin: 0;
}
表单相关样式
代码：
fieldset { /* 定义一致的边框、内边距和外边距 */
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 更改“color”属性在IE8/9浏览器中没有被继承的问题 */
padding: 0; /* 去除外边距，如此即使人们将字段集归零也不会失去样式 */
}
button,
input,
select,
textarea {
font-family: inherit; /* 更改关联字体属性在IE8/9浏览器中没有被继承的问题 */
font-size: 100%; /* 更改字体大小属性在IE8/9浏览器中没有被继承的问题 */
margin: 0; /* 调整边距设置在Firefox 4 , Safari 5, 和 Chrome浏览器中的兼容性问题 */
}
button,
input {
line-height: normal;
/* 调整Firefox 4 浏览器下，客户端样式表中设置了“!important”的“line-height”属性的input表单 */
}
button,
select {
text-transform: none;
/**
* 调整“button”和“select”的“text-transform”继承不一致性的问题
* 其他表单控件元素不继承“text-transform”属性
* 修正“button”标签在Chrome, Safari 5 , and IE 8 中的样式继承问题
* 修正“select”标签在Firefox 4 和Opera中的样式继承问题
*/
}
button,
html input[type="button"], /* 避免webKit bug发生在Android 4.0.* 设备上，破坏原生“audio”和“video”控制组件 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 改正iOS设备中“input”类型表单样式不可用的问题 */
cursor: pointer; /* 增强光标样式在input表单和其他表单的可用性和一致性 */
}
button[disabled],
html input[disabled] {
cursor: default; /* 为禁用表单重设定默认光标样式 */
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 调整IE 8/9中尺寸属性设置为“内容框”的盒子模型 */
padding: 0; /* 去除IE 8/9中的多余的外边距留白部分 */
}
input[type="search"] {
-webkit-appearance: textfield; /* 兼容Safari 5 and Chrome上 “searchfield” 上设置 “appearance”属性 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 兼容Safari 5 and Chrome上 “border-box” 上设置 “box-sizing”属性 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; /* 去除OS X系统上Safari 5和Chrome中容器内边距和搜索取消按钮属性 */
}
button::-moz-focus-inner,
input::-moz-focus-inner { //Firefox 4 浏览器中，去除容器内边距和边框属性
border: 0;
padding: 0;
}
textarea {
overflow: auto; /* IE 8/9中，去除默认垂直滚动条属性 */
vertical-align: top; /* 提高所有浏览器中的文本可读性和版式 */
}
table { /* 删除表格单元格之间的间距。 */
border-collapse: collapse;
border-spacing: 0;
}
Clearfix 可选全局样式
可兼容IE 6/7浏览器
代码：
.clearfix {
*zoom:1
}
.clearfix:before,
.clearfix:after {
display:table;
line-height:0;
content:""
}
.clearfix:after {
clear:both
}
*html .clearfix {
zoom: 1;
} /* IE6 */
*:first-child html .clearfix {
zoom: 1;
} /* IE7 */
Summary 小结
综述，虽说是Reset文件，但是每个网站的需求是不尽相同的，请按照自己项目的需求作个性化调整。以上仅作兼容性解决方案及主流reset.css编写方案参考，整理自global.css、reset.less、normalize.css及bootstrap网站。
持续更新中...
转载请注明：前端录»前端html5 CSS Reset 详细分析