1.html5新標簽ie6,7兼容性問題
h5新標簽如header,footer,section在ie6,7下不能正常的顯示,看一個小栗子
出現(xiàn)這種情況是因為在ie6,7下不支持這些標簽,解決的方法如下:
1).用js動態(tài)創(chuàng)建這些標簽,在css中再給這些標簽的display屬性賦值為block
2).頁面中引入js插件html5shiv.js
2.元素浮動兼容性
1)元素浮動之后,能設置寬度的話就給元素加寬度,如果需要元素是內容撐開,就給它里面的塊元素加浮動
正常瀏覽器下運行結果如下:
ie6下運行結果如下:
要解決這個問題只需給div中的h2標簽加浮動即可
2)第一塊元素浮動,第二塊元素加margin值等于第一個元素的寬,ie6下會有間隙
解決方案:
3.ie6下子元素超過父元素寬高會把父元素的寬高撐開
解決方案:
最好不要這么寫,不要讓子元素的寬高超過父元素
4.p標簽包含元素嵌套規(guī)則
解決:
不能嵌套塊元素的標簽不要嵌套塊元素(p,td,h)
5.margin兼容性問題
可以看到會出現(xiàn)兩個問題:1.margin-top傳遞(父元素沒設置margin-top也有margin-top)2.上下margin疊壓,解決:
6.inline-block在ie6下兼容性問題
三個div設置寬高會豎著排列,給他們的css樣式加上display:inline-block;正常瀏覽器下這些div就會橫著排列,但是在ie6下還是豎著排列,這是因為inline-block是css新出的屬性,所以ie6不兼容,解決方案:
7.ie6最小高度問題(在ie6下div元素有一個默認高度為19px,如果設置元素的高度為1px,ie6下元素看起來就會高很多),解決方案:
8.ie6下雙邊距問題
附加:css? hack
