不用HACK 快速解決CSS佈局網頁瀏覽器相容問題

瀏覽器相容一直是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. 為外層加上高度或寬度。