瀏覽器兼容一直是CSS布局中常見(jiàn)的到的問(wèn)題，初學(xué)者也因此走入很多誤區(qū)，那么通過(guò)我的經(jīng)驗(yàn)，總結(jié)了2個(gè)方法，既可以避免大部分瀏覽器兼容問(wèn)題。

這2個(gè)方法具有以下幾個(gè)優(yōu)點(diǎn)：

1. 無(wú)需使用HACK

2. 簡(jiǎn)單有效，一看即會(huì)

3. 層次化、模塊化布局

4. 代碼更合理，更易于識(shí)別

方法一：解決加內(nèi)外間距造成浮動(dòng)錯(cuò)位

我們通常在多欄布局的時(shí)候需要使用float 進(jìn)行DIV的浮動(dòng)，通常我們會(huì)寫(xiě)3個(gè)DIV來(lái)進(jìn)行3欄布局，我們希望達(dá)到如下效果：

為了達(dá)到這種效果，我們會(huì)加上margin 讓欄目直接由間距，另外還要加上邊框，再加上padding讓里面的文字不會(huì)緊貼邊框。但是意外的情況發(fā)生了，代碼寫(xiě)好了，居然出現(xiàn)下面的情況：

第三欄，跑到了下面。 這個(gè)并不是你想要的效果。那么我們來(lái)分析一下吧。按照一般的思路。整體寬度為800px，，左欄200，中間400，右欄200，這樣看起來(lái)很好，但是這幾個(gè)欄目中間要有間距，所以你要改一下：左欄190，中間400，右欄190這樣是不是就OK了呢。

但是為了好看，你加上了邊框。但卻忘記了邊框也會(huì)增加寬度，另外你增加了欄目的padding:10px; 我暈，那么這樣的實(shí)際寬度就成了：左欄：寬度200-外間距10-內(nèi)間距20-邊框2=168，這樣才不會(huì)錯(cuò)位。但是這樣你不覺(jué)得有點(diǎn)復(fù)雜么，或許你需要配一個(gè)計(jì)算器。這樣的布局一些瀏覽器顯示會(huì)有差距哦。

好了，那么說(shuō)說(shuō)我的方法吧。根據(jù)層次劃分，我把布局和顯示分開(kāi)。 布局就是布局除了寬度、浮動(dòng)外頂多加個(gè)外間距，這樣我就比較容易計(jì)算了。那么我們?cè)诓季值臋谀坷锩嬖偌尤胍粋€(gè)DIV專(zhuān)門(mén)用于顯示邊框，內(nèi)外間距等，你可以不需要定義寬度，自適應(yīng)即可。為了便于你記憶，我即興作詩(shī)一首：固定寬度要浮動(dòng)，不加邊框和補(bǔ)丁，里面套個(gè)DIV，定義樣式起作用！

方法二：解決內(nèi)浮動(dòng)元素脫離外層

我們?yōu)榱俗鲆粋€(gè)產(chǎn)品目錄或者圖片相冊(cè)，使用到了UL，或者N個(gè)DIV，進(jìn)行浮動(dòng)，希望的效果如下：

但是卻事與愿違，最近顯示下面的樣子，外層邊框跑到上面去了：

解決這個(gè)方法其實(shí)也很簡(jiǎn)單，

1. 可以在外層加入一個(gè)float:left; 即可解決。

2. 還有一個(gè)方法就是在 浮動(dòng)結(jié)束后最后面放置一個(gè)清除浮動(dòng)的DIV即可。

3. 給外層加上高度或?qū)挾取?/p>