css浏览器兼容

css reset
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockguote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0}
address,caption,cite,code,dfm,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%,font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}

1>
em / px
16px = 1 em
在body选择器中声明 Font-size = 62.5%;
将原来的px数值除以10 ，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
em 定义的字体具有继承特性


2>
在ie6具有双外边距


所以在设置float:left float:right 之外，如何还设置了 margin-left:10px;
在IE6下，就会变成margin-left:20px; 所以 要设置 display:inline


3>
为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度
给父容器挂一个特殊的class,直接从父容器清楚浮动元素的浮动
<div classs="clearfix"><div class="fl"></div></div>
.clearfix {clear:both}
4>
Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，
IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。 


5>
IE6专用 _height:100px;
IE7专用 *+height:100px;
IE6 IE7共用 *height:100px
IE7 FF 共用 height：100px !important


6> FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)


7>若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)


8>IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
  FF：opacity:0.6。 


9>设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 
    #IamFloat{
       float:left;
       margin:5px;/*IE下理解为10px*/
      display:inline;/*IE下再理解为5px*/
     } 


css hack


1. IE条件注释
<!--[if IE]><![endif]-->
2.选择符前缀法


3.解决超链接访问后hover样式不出现的问题
a:visited在前
a:hover 在后


link  visited hover active


3.display:inline-block 让块级元素和行内元素在一行中。