那些年咱們一塊兒處理的瀏覽器兼容

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;
        }