兼容性總結

1. ie6下的margin雙邊距問題：在ie6下快屬性標籤設置了float，在float方向上設置margin，就會出現雙倍margin的問題

　  解決方案： (1) 給float元素設置 display：inline；  (2) hack處理：對IE6進行_margin-left:margin值 處理     .box{margin-left:20px;_margin-left:20px;}

註解:  css hack是經過在css樣式中加入一些特殊的符號，讓不一樣的瀏覽器識別不一樣的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，css hack就是讓你記住這個標準），從而達到應用不一樣css樣式的目的    

2. 當標籤的高度設置小於10px時，在IE6和IE7中會超過設置的最小高度

　　解決方案：設置overflow:hidden  或者 line-height設置成小於設置的高度值

3. 行內標籤爲了設置寬高會設置成display:block，這樣一來就會產生上面說的雙邊距問題

　　解決方法：設置成display:inline，可是這樣就不能設置寬高 ，因此在添加一個display:table

4. 上下margin重疊問題，當相鄰的兩個元素都設置了上下margin後，會取最大值，捨棄最小值

5. 兩個塊級元素， 父元素設置了overflow:auto，子元素設置了position:relative，且高度大於父集高度，在IE6和IE7下會被隱藏而不溢出

　　解決方法：父集元素添加position:relative

6. chrome下默認會將小於12px的文本強行按照12px進行解析

　　解決方法：添加屬性：-webkit-text-size-adjust:none         

7. IE6下div高度沒法小於19px, 小於19px會被當作19px來處理

　　解決方法：（1）添加overflow:hidden屬性；  （2）設置font-size大小爲高度大小

8： png24位的圖片在IE6下回出現背景，最好使用png8格式的

9.  盒模型問題 ( 在IE下不設置文檔聲明 會進入怪異盒模型解析 )

　　標準盒模型width是內容寬              可視寬 = width + padding + border

　　怪異盒模型width是可視寬              內容寬 = width  - padding  - border

10.  ie6下不支持1px的點線

　　解決方法： 切圖 用背景代替（平鋪）

11.  ie6和ie7下li本省沒有浮動，可是li裏面的內容（兩個或兩個以上都浮動，若是隻有一個浮動不會出現，可是會折行）浮動， li 下面就會產生幾像素的間隙

　　解決方法：   給 li 加float

　　　　　　　　給 li 添加樣式 :  vertical-align: top

12. ie6下 浮動元素和絕對定位（absolute）元素是並列關係的時候，絕對定位元素會消失

　　解決方法 ： 用div把絕對定位元素包起來

13. ie6和ie7下元素有相對定位（relative）, 父集的overflow對他是不起做用的

　　解決方法： 給父級也添加以一個相對定位（relative）

14. ie6下當一行的子元素所佔寬度之和和父級的寬度相差超過或等於3px，或者有不滿行狀態的時候，最後一行下的margin就會失效

　　解決方法： 暫時無解

15. ie6下絕對定位（absolute）元素父級的寬（高）是奇數的話，rigth和bottom會有1px的誤差

　　解決方法：

16： ie6和ie7下輸入型的input上下會有1px的間隙，並且還會撐開設置好的高度

　　解決方法： 給input加浮動

17. ie6和ie7下輸入類型的表單控件，border:none無效

　　解決方法： 背景重置