CSS Reset 详细分析_html/css_WEB-ITnose

    最近在看nodejs，《Node.js实战》这本书果然不错，按照步骤来，还是蛮容易上手的，我不是打广告。。

    我是前端出身，所以搞着搞着就开始想前端的东西。。果然裸写css现在已经变成一件十分蛋疼的事情，所以琢么着如果不用baidu的fis，我自个儿加less什么的，之后就想到，最好还是搭建一个common.less，里面可以放好多mixin什么的，这样也可以为以后的工作先少点重复劳动，看了下我师父写的架子，没想到网上有一个写的不错的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; */}

 

音频模块兼容性问题

　　代码：

　　audio:not([controls]) {        display: none; /*为防止在主流浏览器中出现“不带控制按钮的音频模块”这一问题。*/        height: 0; /*解决iOS5移动端显示多余高度的兼容性问题。 */    }

 

特殊模块样式处理
处理 不存在于 IE 8/9 的样式。

代码：

[hidden]{    display:none;}

 

提高搜索优化
很多新增的HTML模块元素在搜索优化上也起到不可轻视的作用。

　　代码：

address { /* 屏幕阅读器和搜索引擎找到地址或电话号码，默认样式是 display: block */  display: block;}<address>    <p>address:detail</p>    <p>       <a href="tel:+12233444">1223334444</a>    </p>    <p>       <a href="mailto:address@mail.com">address@mail.com</a> /* 亦可标记电子邮件地址 */    </p></address>

 

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网站。