做兼容頁面的方法是:每寫一小段代碼(布局中的一行或者一塊)我們都要在不同的瀏覽器中看是否兼容,當然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的,只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話,就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題。下面簡單的舉兩個小例子。
問題一:行內(nèi)屬性標簽,設(shè)置display:block后采用float布局,又有橫行的margin的情況,IE6間距bug
行內(nèi)屬性標簽,為了設(shè)置寬高,我們需要設(shè)置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后,在IE6下,他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標簽,所以我們再加上display:inline 的話,它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe,此元素會作為塊級表格來顯示。
問題二:圖片默認有間距
當幾個img標簽放在一起的時候,有些瀏覽器會有默認的間距,加通配符也不起作用。首先因為img標簽是行內(nèi)屬性標簽,所以只要不超出容器寬度,img標簽都會排在一行里,但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。有些前端新手使用負margin,雖然能解決,但負margin本身就很容易引起瀏覽器兼容問題的用法,所以最好不要用。
上一篇: css3過渡動畫的使用