Web前端常見相容性問題

2022-09-13 19:48:12 字數 1382 閱讀 4878

一、    a偽類

二、    border:

solid    實線

dashed  虛線

dotted   點線(ie6不相容)

三、    display:inline-block

四、    ie6雙邊距bug

a、ie6

b、浮動

c、橫向margin

d、塊屬性標籤(加display:inline;)

ü  解決辦法: display:inline;

五、    ie6下li部分相容性問題:

a、左右兩列布局,右邊右浮動ie6 ie7下折行;(左邊元素浮動)

b、ie6 ie7  li  下元素都浮動 在ie6 ie7下 li 下方會產生4px間隙問題;(加    vertical-align:top;)

ü  解決辦法:

1.給li加浮動

2.給li加vertical-align

六、    固定定位

七、定位的相容問題

在 ie6 下父級的 overflow:hidden; 包不住子級的relative;

在 ie6 下定位元素的父級寬高都為奇數那麼在 ie6 下定位元素的 right 和      bottom 都有1畫素的偏差。

八、表單元素

對高度的支援不相容;

各個瀏覽器下的預設滾動條顯示不相容

css3新增 resize 調整尺寸屬性;

九、    ie6下最小高度問題

ü  解決辦法:overflow:hidden。

十、    1px dotted 在ie6下不支援

ü  解決辦法:切背景平鋪

十一、      在ie6下解決margin傳遞要觸發haslayout

ü  解決辦法:觸發父級的haslayout

十二、      在ie6下的文字溢位bug

ü  解決辦法:用div把注釋或者內嵌元素用div包起來

十三、       

ü  解決辦法:  給定位元素外麵包個div

ü  解決辦法: 給父級也加相對定位

ü  解決辦法:給input加浮動

十四、png24相容性問題

ü  解決方案:

js外掛程式(問題:不能處理body之上png24)

原生濾鏡

_background:none;

_filter:progid:dximagetransform.microsoft.alphaimageloader(src="xx.png",                             

sizingmethod="crop");

常見相容性問題

png24位的在ie6瀏覽器上出現背景,解決方案是做成png8.也可以引用一段指令碼處理.瀏覽器預設的margin和padding不同。解決方案是加乙個全域性的 來統一。ie6雙邊距bug 塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大。浮動ie產生的雙倍距...

常見相容性問題

png24位的在ie6瀏覽器上出現背景,解決方案是做成png8.也可以引用一段指令碼處理.瀏覽器預設的margin和padding不同。解決方案是加乙個全域性的 來統一。ie6雙邊距bug 塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大。浮動ie產生的雙倍距...

前端開發常見的相容性問題

作為乙個前端開發者,最煩惱的應該是解決瀏覽器的相容問題了吧,為了使網頁能在瀏覽器下正常展現和提高使用者的體驗度。現在我來總結下我在工作中所遇到的一些問題以及我的一些解決方法。ie瀏覽器使用濾鏡實現 filter progid dximagetransform.microsoft.alpha styl...