前端兼容性問(wèn)題整理

1、*ie6下子級(jí)寬度會(huì)撐開(kāi)父級(jí)設(shè)置好的寬度。

方案:將子級(jí)元素的寬度設(shè)置為小于等于父級(jí)元素的寬度盒模型的計(jì)算一定要準(zhǔn)確,否則在IE下會(huì)出現(xiàn)問(wèn)題;

2、*IE6中,元素浮動(dòng):如果元素需要寬度進(jìn)行撐開(kāi),需要給里面的子級(jí)元素都添加浮動(dòng)才可以

3、*IE6的最小高度問(wèn)題,

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

5、*IE6/7/8下,父級(jí)有邊框的時(shí)候,子級(jí)的margin會(huì)失效,

方案:在IE下的大部分兼容性問(wèn)題都是因?yàn)閔asLayout屬性觸發(fā)的問(wèn)題,盡量觸發(fā)hasLayout可以減少I(mǎi)E的問(wèn)題

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

6、在IE6下,!塊元素有浮動(dòng)并且橫向有margin 的時(shí)候,橫向的margin會(huì)擴(kuò)大兩倍!

方案:給塊元素設(shè)置display:inline;

7、ie6/7下,li本身沒(méi)有浮動(dòng),li里面的內(nèi)容有浮動(dòng)。li下會(huì)產(chǎn)生一個(gè)間隙

方案:給li設(shè)置浮動(dòng):float:left;或vertical-align:top/middle/bottom;

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

方案:必須使用float:left;

9、在ie6下 的文字溢出

子元素的寬度和父級(jí)的寬度如果相差小于3px的時(shí)候,兩個(gè)浮動(dòng)元素中間有注釋或者內(nèi)聯(lián)元素的時(shí)候,就會(huì)出現(xiàn)文字溢出,內(nèi)聯(lián)元素越多,溢出越多

方案:用塊元素標(biāo)簽把注釋或者內(nèi)聯(lián)元素包裹起來(lái)

10、在IE6下,當(dāng)浮動(dòng)元素和絕對(duì)定位元素是兄弟的時(shí)候,絕對(duì)定位會(huì)失效

方案:不讓浮動(dòng)元素和絕對(duì)定位是兄弟,? 可以用div元素嵌套

11、在IE6/7下,子級(jí)元素有相對(duì)定位,父級(jí)overflow包不住子級(jí)元素

方案:給父級(jí)設(shè)置相對(duì)定位

12、ie6下,如果絕對(duì)定位的父級(jí)寬和高是奇數(shù)的時(shí)候,子級(jí)元素的right和bottom會(huì)有1像素的偏差

方案:跟美工商量,換偶數(shù)

13、ie6沒(méi)有固定定位,只能用JS去模擬

14、ie不認(rèn)識(shí)opacity

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

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

方案:給input加浮動(dòng)

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

方案:通過(guò)JS

17、<!--注釋條件語(yǔ)句-->

<!--[if ie]>

我是IE

<![end if]-->

18、css hack

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,090評(píng)論 1 92
  • 斷斷續(xù)續(xù)的在開(kāi)發(fā)過(guò)程中收集了好多的bug以及其解決的辦法,都在這個(gè)文章里面記錄下來(lái)了!希望以后解決類似問(wèn)題的時(shí)候能...
    卡卡西哥哥閱讀 655評(píng)論 0 1
  • Ba la la la ~ 讀者朋友,你們好啊,又到了冷鋒時(shí)間,話不多說(shuō),發(fā)車! 13.子選擇器在IE6...
    王飽飽閱讀 470評(píng)論 0 2
  • 作者:@翁呀偉呀 授權(quán)本站轉(zhuǎn)載 概論 所謂的持久化,就是將數(shù)據(jù)保存到硬盤(pán)中,使得在應(yīng)用程序或機(jī)器重啟后可以繼續(xù)訪問(wèn)...
    翻山越嶺的另一邊閱讀 511評(píng)論 0 1
  • 每次開(kāi)篇,富爸爸說(shuō)和窮爸爸說(shuō)總會(huì)同時(shí)出現(xiàn)。這也給了我們很好的對(duì)比。這一章我們會(huì)了解兩種不同的預(yù)算。而學(xué)習(xí)如何做盈余...
    Betty_曉芳閱讀 629評(píng)論 0 0

友情鏈接更多精彩內(nèi)容