常見的幾個瀏覽器兼容問題

所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同⼀段代碼有不一樣的解析，形成頁⾯顯示效果不統一的狀況。

兼容問題一：塊屬性標籤float後，⼜有橫⾏的margin狀況下，在IE6顯⽰margin比設置的⼤

出現問題：IE6中後面的⼀塊被頂到下一⾏

解決⽅案：在float的標籤樣式控制中加入 display:inline;將其轉化爲⾏內屬性

 

兼容問題二：⾏內屬性標籤，設置display:block後採用float佈局，又有橫⾏的margin的狀況，IE6間距bug
出現問題：IE6⾥的間距比超過設置的間距
解決方案：在display:block;後面加入display:inline;display:table;

兼容問題三：⼦元素綁架父元素的margin-top
出現問題：這個問題主要出如今非IE瀏覽器中。若是子元素和⽗元素之間沒有任何內容，將⼦元素設置margin-top後，⼦
元素不會動，⽽⽗元素會由於margin-top往下移動。
解決方案：在⽗元素和子元素之間加入<div stye=‘height:0’>&nbsp;</div>。或者設置父元素的padding-top。

兼容問題四：標籤最低高度設置min-height不兼容
出現問題：由於min-height自己就是⼀個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容
解決方案：若是咱們要設置⼀個標籤的最⼩高度200px，須要進行的設置爲：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
備註：當內容小於一個值（如300px）時。容器的高度爲300px；
當內容⾼度⼤於這個值時，容器高度被撐高，⽽不是出現滾動條。這時候咱們就會面臨這個兼容性問題。