代码改变世界

关于CSS RESET

2012-02-28 14:17  iBlog  阅读(2269)  评论(2)  编辑  收藏  举报

         只要您的客户存在使用不同浏览器（ie,firefox,chrome等）的可能，那你就不得不从完美的理想状态回到现实，因为不同核心的浏览器对CSS的解析效果呈现各异，导致您所期望的效果跟浏览器的“理解”效果有偏差，今天提到的css reset就是用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线”，仅此而已，它不是万能的！在不同核心浏览器下，对于css 属性对某些元素的作用呈现出来的偏差，不是CSS reset所能解决的，它只是解决或部分解决元素的默认初始值问题（约定起跑线而已），至于比赛开始后，运动员们使用什么规则（直线、曲线？），什么步调跑，它就管不着了，至少它们站在同一起跑线上了，鼓掌！

        css reset的前世今生请看Reset CSS研究（八卦篇） 玉伯 ，css reset不是一个死的规则，它是根据自己项目，自己的需求来定制的，比如说英文页面和中文页面期望的字体、大小等都不同，很难一概而论，但我们可以参考国内优秀站点的reset（记那些大牌网站的css reset(初始化)样式）然后结合自身的需求进行定制。我个人在工作中也定制了一个。

   1: @charset "utf-8";
   2: /*参考taobao玉伯的reset,并有删减*/
   3:  
   4: html { overflow-x: hidden; overflow-y: auto; }/*隐藏横向滚动，垂直滚动根据内容自适应（去除IE默认垂直滚动条）*/
   5:  
   6:  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset,
   7:  lengend, button,select, input, textarea,th, td { /* 清除内外边距 */  
   8:      margin: 0;  
   9:      padding: 0;  
  10:  }  
  11:    
  12:  body,button, input, select, textarea {/* 设置默认字体 */  
  13:      font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ 
  14:  }  
  15:    
  16:  h1 { font-size: 18px; }  
  17:  h2 { font-size: 16px; }  
  18:  h3 { font-size: 14px; }  
  19:  h4, h5, h6 { font-size: 100%; }  
  20:  
  21:  ul, ol { list-style: none; }  /* 重置列表元素 */  
  22:    
  23:  /* 重置文本格式元素  */  
  24:  a {text-decoration:none;}
  25:  a:hover {text-decoration:none; color:#ff6600;} 
  26:    
  27:  q:before, q:after { content: ''; }  
  28:    
  29:  /* 重置表单元素 */  
  30:  legend { color: #000; }
  31:  fieldset, img { border: none; }  
  32:  button, input, select, textarea {  
  33:      font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */  
  34:  }  
  35:    
  36:  /* 重置表格元素 */  
  37:  table {  
  38:      border-collapse: collapse;  
  39:      border-spacing: 0;  
  40:  }  
  41:    
  42:  /* 重置 hr */  
  43:  hr {  
  44:      border: none;  
  45:      height: 1px;  
  46:  }
 
哦，对了有些人可能有这样的疑问：这么多的元素都复位了，然后还要再重新设置样式，这不是闲着蛋疼吗？是的，确实有这样的矛盾，终极的目标就是该复位的复位，不需要的就免了，权衡利弊即可，不用太纠结！

 

        还有一些资源可供参考：

kissy——reset.css

暴风彬彬——目前比较全的CSS重设(reset)方法总结