常見的瀏覽器兼容性問題與解決方案——CSS篇


1、不同的瀏覽器的標簽默認的外補丁和內補丁不同

問題症狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin和padding差異較大。

碰到頻率:100%

解決方案:初始化CSS的默認樣式,*{margin:0;padding:0}。也可以使用其他網站的初始化代碼

備注:這個是最常見的也是最容易解決的一個瀏覽器兼容性問題。

 

2、塊屬性標簽float后,又有橫行的margin情況下,在IE6顯示margin比設置的大

問題症狀:常見的是IE6中后面的一塊被頂到下一行。

碰到頻率:90%

解決方案:在float的標簽樣式控制中加入display:inline;將其轉化為行內屬性。

 

3、設置較小高度標簽,在IE6、IE7和遨游瀏覽器中高度超出自己設置的高度

問題症狀:IE6、IE7和遨游瀏覽器里這個標簽的高度不受控制,超出自己設置的高度。

碰到頻率:60%

解決方案:給超出高度的標簽設置overflow:hidden;或者設置行高line-height小於你設置的高度。

 

4、行內屬性標簽,設置display:block后采用float布局,又有橫行的margin的情況,IE6間距bug

問題症狀:IE6里的間距比超過設置的間距。

碰到頻率:20%

解決方案:在display:block;后面加入display:inline;display:table;

 

5、圖片默認有間距

問題症狀:幾個img標簽放在一起的時候,有些瀏覽器會有默認的間距,加了margin:0;和padding:0也不起作用。

碰到頻率:20%

解決方案:使用float屬性為img布局。

 

6、標簽最低高度設置min-height不兼容

問題症狀:因為min-height本身就是一個不兼容的CSS屬性,所以設置min-height時不能很好的被各個瀏覽器兼容。

碰到頻率:20%

解決方案:如果我們需要設置一個標簽的最小高度是200px,需要進行的設置為:{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM