前端兼容性問題整理

1、*ie6下子級寬度會撐開父級設置好的寬度。

方案:將子級元素的寬度設置為小于等于父級元素的寬度盒模型的計算一定要準確,否則在IE下會出現問題;

2、*IE6中,元素浮動:如果元素需要寬度進行撐開,需要給里面的子級元素都添加浮動才可以

3、*IE6的最小高度問題,

4、*IE6 下不支持1px的 dotted 邊框樣式切背景平鋪

5、*IE6/7/8下,父級有邊框的時候,子級的margin會失效,

方案:在IE下的大部分兼容性問題都是因為hasLayout屬性觸發的問題,盡量觸發hasLayout可以減少IE的問題

hasLayout只在IE6/7/8中有,zoom 界面加載初始賠率,觸發IE 中haslayout

6、在IE6下,!塊元素有浮動并且橫向有margin 的時候,橫向的margin會擴大兩倍!

方案:給塊元素設置display:inline;

7、ie6/7下,li本身沒有浮動,li里面的內容有浮動。li下會產生一個間隙

方案:給li設置浮動:float:left;或vertical-align:top/middle/bottom;

8、ie6下,最小高度的BUG和li的間隙問題共存的時候,使用vertical-align:top/middle/bottom;是無效的

方案:必須使用float:left;

9、在ie6下 的文字溢出

子元素的寬度和父級的寬度如果相差小于3px的時候,兩個浮動元素中間有注釋或者內聯元素的時候,就會出現文字溢出,內聯元素越多,溢出越多

方案:用塊元素標簽把注釋或者內聯元素包裹起來

10、在IE6下,當浮動元素和絕對定位元素是兄弟的時候,絕對定位會失效

方案:不讓浮動元素和絕對定位是兄弟,? 可以用div元素嵌套

11、在IE6/7下,子級元素有相對定位,父級overflow包不住子級元素

方案:給父級設置相對定位

12、ie6下,如果絕對定位的父級寬和高是奇數的時候,子級元素的right和bottom會有1像素的偏差

方案:跟美工商量,換偶數

13、ie6沒有固定定位,只能用JS去模擬

14、ie不認識opacity

用:filter:alpha(opacity=0~100);

15、ie6/7下,輸入表單控件上下會有1px的間隙

方案:給input加浮動

16、ie6不支持透明度的方式

方案:通過JS

17、<!--注釋條件語句-->

<!--[if ie]>

我是IE

<![end if]-->

18、css hack

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,801評論 1 92
  • 斷斷續續的在開發過程中收集了好多的bug以及其解決的辦法,都在這個文章里面記錄下來了!希望以后解決類似問題的時候能...
    卡卡西哥哥閱讀 605評論 0 1
  • Ba la la la ~ 讀者朋友,你們好啊,又到了冷鋒時間,話不多說,發車! 13.子選擇器在IE6...
    王飽飽閱讀 460評論 0 2
  • 作者:@翁呀偉呀 授權本站轉載 概論 所謂的持久化,就是將數據保存到硬盤中,使得在應用程序或機器重啟后可以繼續訪問...
    翻山越嶺的另一邊閱讀 461評論 0 1
  • 每次開篇,富爸爸說和窮爸爸說總會同時出現。這也給了我們很好的對比。這一章我們會了解兩種不同的預算。而學習如何做盈余...
    Betty_曉芳閱讀 602評論 0 0