那些年我们一起处理的浏览器兼容

1.使用clearfix类清除浮动；在需要清除浮动的位置引入该类。

1. 
   

2. .clearfix{
   

3.         display: block;
   

4.         zoom:1;                
   

5. } 
   

6. .clearfix:after,.clearfix:before{/*设定一个为空的元素，用来清除元素之间的浮动，这个只能作用于对大多数符合标准的浏览器；*/
   

7.         visibility: hidden;
   

8.         display: block;
   

9.         font-size: 0;
   

10.         content: " ";
    

11.         clear: both;
    

12.         height: 0;
    

13. } 
    

14. * html .clearfix{height:1%;/*这是为了触发IEhaslayout*/}
    

15. .clearfix{display:block;}

复制代码

2.IE6下的3像素；

有时候吧，这个IE6会莫名其妙的多出来这个几像素，这是个非常讨厌的事情，毕竟咱们精精确确算的布局到这他这里变得有点惨不忍睹！

不过使用_margin-right:-3px;就可以咯

3.IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白

        添加：zoom:1;
        设置UL 的width

4.IE低版本PNG图片不透明解决方案；

小可比较懒散，所以这个PNG透明的问题还是比较喜欢使用JS来做处理的；这些JS 在网上有很多的DEMO，大家可以找找看，小可比较喜欢使用这个DD_belatedPNG.js实现。
具体的引入方式是：

1. <!--[if IE 6]>
   

2.                 <script src="css/DD_belatedPNG_0.0.8a.js" mce_src="css/DD_belatedPNG_0.0.8a.js"></script>
   

3.                 <script type="text/javascript">DD_belatedPNG.fix('*');</script>
   

4.         <![endif]-->

复制代码

5.img引入图片之后会有几像素的空白间隙

        可添加 img{display:block;}

6.如何设置鼠标在所有浏览器中均显示手的形状

        .p{cursor:pointer;}

7.实现已知高宽元素垂直居中；

        #div{
                position:relative;
                width:400px;
                height:400px;
                border：1px solid #f00;
                top:50%;
                left:50%;
                margin-left:-200px;
                margin-top:-200px; 
        }

8.内联元素 span 高宽设置；
        span{
                display:block;
                width:200px;
                height:35px;
        }

9.超链接保留有虚线框；
        a{
                outline:none;
        }


10.设置元素透明度之后，元素内的内容也会随之变成透明状态；

1. .wraper{width:200px;height:200px;background:#f00;filter:alpha(opacity=50);opacity:.5;}
   

2. .content{width:200px;height:200px;margin-top:-200px;}
   

3. <div class="wraper"></div> 
   

4. <div class="content"> </div>

复制代码

11.设置元素横向居中；
        #div{
        width:980px;
        margin:0px auto;
        }

12.文字垂直居中、首行缩进；
        #lh20{
        height:20px;
        line-height:20px;
        text-indent:1em;        
}

13.设置浮动之后IE出现双倍间距；
        #div{
                float:left;
                display:inline;
        }