IE瀏覽器兼容性問題解決方案
一、CSS常見問題

1、H5標簽兼容性

　　解決方案：<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

2、元素浮動之後，能設置寬度的話就給元素加寬度，如果需要寬度是內容撐開的，就給它裏邊的塊元素加上浮動float:left;

3、第一塊元素浮動，第二塊元素加margin-left值等於第一塊元素寬度，在IE6下會有間隙問題

　　解決方案：不要用margin-left，給兩個元素都加上浮動float:left;

4、IE6下子元素超出父級寬高，會把父級寬高撐開，比如用於放置輪播的ul寬度會超出父元素

　　解決方案：不要讓子元素的寬高超過父級

5、P包含塊元素嵌套規則

　　牢記規則：p、h標簽不能嵌套塊元素

二、CSS兼容性問題

1、margin兼容性問題

　　1）margin-top傳遞，子元素上下margin會傳遞給父級

　　阻止：觸發BFC（如overflow:hidden;拯救標準瀏覽器及IE78）、觸發IE的haslayout zoom:1（拯救IE67）;

　　2）上下margin疊壓（觸發條件：同級元素，第一個元素的下與第二個元素的上會疊壓在一起）

　　解決方案：兩個元素分開設置margin，然後盡量使用同一方向的margin，比如margin-top

2、display:inline-block; 　　塊元素變為內聯塊， IE67不兼容；內聯元素變為內聯塊，所有瀏覽器都支持

　　解決方案：{display:inline-block; *display:inline; *zoom:1;}

　　發現問題：當然，變為內聯塊後，有一個特性就是如果元素換行，在頁面上元素之間就會有空隙的，空隙大小為一個空格的像素大小。

3、IE6元素最小高度為19px

　　解決方案：overflow:hidden;

4、IE67雙邊距，當元素浮動後，再設置margin，那麽就會產生雙倍邊距

　　解決方案：針對IE67，添加*display:inline;樣式，比如頁面上橫向排列的幾組塊，會經常遇到

5、li裏元素都浮動，在IE67下方會產生4px間隙問題

　　解決方案：針對IE67，添加*vertical-align:top;樣式

6、IE6下，兩個浮動元素之間有註釋或者內聯元素並且和父級寬度相差不超過3px，會導致多復制一些文字問題

　　解決方案：1）兩個浮動元素之間避免出現內聯元素或者註釋

　　　　　　　2）與父級寬度相差3px或以上　　

7、IE67父級元素的overflow:hidden;子元素設置position:relative後，就包不住子元素了

　　解決方案：針對IE67，給父級元素添加position:relative;

8、IE6下絕對定位元素父級寬高是奇數，絕對定位元素的right和bottom值會有1px的偏差

　　解決方案：避免父級寬度出現奇數

9、IE6下絕對定位元素和浮動元素並列絕對定位元素消失

　　解決方案：浮動元素和絕對定位元素時同級的話，定位元素就會消失，只要讓它們兩個不處於同級就可以避免這個bug了

10、IE6下input的空隙

　　解決方案：針對IE67，給input元素添加*float:left;

IE瀏覽器兼容性問題解決方案