瀏覽器兼容一直是CSS佈局中常見的到的問題,初學者也因此走入很多誤區,那麼通過我的經驗,總結了2個方法,既可以避免大部分瀏覽器兼容問題。
這2個方法具有以下幾個優點:
1. 無需使用HACK
2. 簡單有效,一看即會
3. 層次化、模塊化佈局
4. 代碼更合理,更易於識別
方法一:解決加內外間距造成浮動錯位
我們通常在多欄佈局的時候需要使用float 進行DIV的浮動,通常我們會寫3個DIV來進行3欄佈局,我們希望達到如下效果:
為了達到這種效果,我們會加上margin 讓欄目直接由間距,另外還要加上邊框,再加上padding讓裡面的文字不會緊貼邊框。但是意外的情況發生了,代碼寫好了,居然出現下面的情況:
第三欄,跑到了下面。 這個並不是你想要的效果。那麼我們來分析一下吧。按照一般的思路。整體寬度為800px,,左欄200,中間400,右欄200,這樣看起來很好,但是這幾個欄目中間要有間距,所以你要改一下:左欄190,中間400,右欄190這樣是不是就OK了呢。
但是為了好看,你加上了邊框。但卻忘記了邊框也會增加寬度,另外你增加了欄目的padding:10px; 我暈,那麼這樣的實際寬度就成了:左欄:寬度200-外間距10-內間距20-邊框2=168 ,這樣才不會錯位。但是這樣你不覺得有點複雜麼,或許你需要配一個計算器。這樣的佈局一些瀏覽器顯示會有差距哦。
好了,那麼說說我的方法吧。根據層次劃分,我把佈局和顯示分開。 佈局就是佈局除了寬度、浮動外頂多加個外間距,這樣我就比較容易計算了。那麼我們在佈局的欄目裡面再加入一個DIV專門用於顯示邊框,內外間距等,你可以不需要定義寬度,自適應即可。為了便於你記憶,我即興作詩一首:固定寬度要浮動,不加邊框和補丁,裡面套個DIV,定義樣式起作用!
方法二:解決內浮動元素脫離外層
我們為了做一個產品目錄或者圖片相冊,使用到了UL,或者N個DIV,進行浮動,希望的效果如下:
但是卻事與願違,最近顯示下面的樣子,外層邊框跑到上面去了:
解決這個方法其實也很簡單,
1. 可以在外層加入一個float:left; 即可解決。
2. 還有一個方法就是在浮動結束後最後面放置一個清除浮動的DIV即可。
3. 給外層加上高度或寬度。