作為 Web 設計師，你的網站在各種瀏覽器中有完全一樣的表現是很多人的目標，然而這是一個永遠無法真正實現的目標，很多人認為，完美的跨瀏覽器相容並不必要，這樣說雖然沒錯，但在很多情形，一種近似的相容還是很容易實現的，本文講的是各種跨瀏覽器相容的 CSS 編碼準則和技巧。

　　理解 CSS 盒子模型

　　如果你想實現不需要很多奇巧淫技的跨瀏覽器相容的 CSS 程式碼，透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型並不難，且基本支援所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。

　　CSS 盒子模型負責處理以下事情:

　　一個 blcok (區塊)級物件佔據多大的空間;該物件的邊界，留白;盒子的尺寸;盒子與頁面其它元素的相對位置

　　CSS 盒子模型有以下準則:

　　Block (區塊)物件都是矩形 (事實上所有物件都如此);其尺寸由 width, height, padding, borders, 以及 margins 決定;如果不設定高度，該盒子的高度將自動適應其包含的內容，加上留白等(除非使用了 float);如果不設定寬度，一個非 float 型盒子水平上將充滿其父容器(扣除父容器的留白)

　　處理 block 級物件時，必須注意以下事項:

　　如果一個盒子的寬度設定為 100%，它就不能再設定 margins, padding, 和 borders，否則會撐破其父容器

　　垂直毗鄰的 margin 會引起復雜的坍塌問題，導致佈局問題(比如兩個垂直毗鄰的 Block 物件，上面的物件的 bottom-margin 為 40，下面的物件的 top-margin 為 20，則兩個物件的間距將是 40，而不是 60 - 譯者)

　　擁有相對位置和絕對位置的物件，擁有不同的行為

　　在 Firefox 的 Firebug 中顯示的盒子模型

　　理解 block 級和 inline 級 物件的區別

　　這個看似簡單的問題事如果能透徹地理解，會受益匪淺。

　　下圖講解了 block 級物件和 inline 級物件的區別:

　　下面是 block 級物件和 inline 級物件的基本區別:

　　Block 級物件會自然地水平充滿其父容器，因此沒有必要為之設定 100% 寬度屬性

　　Block 級物件的起始擺放位置是其父容器的左上邊界，並順排在其前面的兄弟 Block 物件的下方(除非設定 float 或絕對位置)

　　Inline 級物件會忽略其寬度和高度設定

　　nline 級物件會隨著文字排版，並受排版屬性的影響(如 white-space, font-size, letter-spacing)

　　Inline 級物件可以使用 vertical-align 屬性控制其垂直對齊，block 級物件不可以

　　Inline 級物件的下方會保留一些自然的空間，以適應字母 g 一類的會向下探出的筆畫

　　一個設定為 float 的 inline 物件將變成 block 物件

　　理解 Floating 和 Clearing 屬性

　　實現多欄排版的最好方法是使用 float 屬性，float 也是一個將使你受益匪淺的屬性。一個 float 物件可以居左或居右，一個設定為 float 的物件，將根據設定的方向，左移或右移到其父容器的邊界，或其前面的 float 物件的邊界，而緊隨其後的非 float 物件或內容，則包圍在其相反的方向。

　　以下是使用 float 和 clear 屬性的一些重要準則:

　　一個 float 物件，將從其置身的 block 級非 float 內容流中跳出，換句話說，如果你要將一個 box 向左邊 float，它後面的 block 級非 float 物件會顯示到下方，inline 級內容會在旁邊包圍

　　要讓一段內容從一側包圍一個 float 物件，這段內容必須要麼是 inline 級的，要麼也設定為相同方向的 float

　　一個 float 物件，如果沒有設定寬度，則會自動縮成其包含的內容的寬度，因此最好為 float 物件明確設定寬度

　　如果一個 block 物件包含 float 子物件，會出現本文中闡述的問題。

　　一個設定了 clear 屬性的物件，將不會包圍其前面的 float 物件

　　一個既設定了 clear 又設定了 float 屬性的物件，只有 clear:left 屬性生效，clear:right 不起作用

　　首先使用 IE 進行測試

　　雖然我們都痛恨 IE6 和 IE7，但當你開始一個新專案的時候，最好還是首先針對這兩種瀏覽器進行測試，否則，如果你在設計在後期才想起針對 IE6 和 IE7 進行測試，將出現以下問題：

　　你將不得不使用一些奇巧淫技，甚至使用獨立的 IE6/7 CSS，導致 CSS 檔案臃腫。

　　某些地方的佈局將不得不重新設計

　　會增加測試的時間

　　你的佈局在 IE/6/7 中和其它瀏覽器中不一樣

　　如果你設計的是個人專案，Web 程式等，則不建議你針對舊版本 IE 做太多工作，而對一些公司類站點，它的使用者群中有大量 IE 使用者，這些技巧會讓你避免大量的頭痛。如果將 IE 的問題歸類為 IE 的 BUG 而不去處理，會帶來很多負面的影響，和 IE 和平共處是 Web 開發與設計者不可逃避的現實。

　　IE 瀏覽器最常見的問題

　　IE6 中不可濫用 float，否則會帶來內容消失以及文字重複等稀奇古怪的問題

　　IE6 中，float 物件，在 float 方向的那邊，會出現雙倍 margin，將 display 設定為 inline 會解決這個問題

　　IE6/7 中，一個沒有直接或間接設定 hasLayout 的物件，會發生各種稀奇古怪的問題 (譯者注：對這類問題，zoom 這個 css 屬性可以幫很大的忙，將 zoom 設定為除了 normal 之外的其它值，可以迫使一個物件 hasLayout 同時不影響這個物件的任何視覺外觀)

　　E6 不支援 min-width, max-width, min-height, max-height 一類的屬性

　　IE6 不支援固定位置背景圖

　　IE6/7 不支援很多 display 屬性值(如 inline-table, table-cell, table-row)

　　IE6 中，只有 a 這個物件才可以使用 :hover 這個偽類

　　IE 的某些版本對某些 CSS 選擇器支援很少(如屬性選擇器，子物件選擇器)

　　IE6~8 對 CSS3 的支援很有限 (不過有一些變通方法)

　　永遠不要指望在所有瀏覽器中都一模一樣

　　在不同瀏覽器實現相同的體驗個功能是可能的，實現近似畫素級的一致外觀也是可能的，但永遠不要指望一模一樣。

　　Form 控制元件在不同瀏覽器顯示總是不同

　　以下是 Facebook 首頁中的 select 控制元件，在5種不同瀏覽器的顯示差異(基於 Adobe’s Browserlab 截圖)

　　某些 Form 控制元件，如果要求必須跨瀏覽器一致，可以找到變通辦法，如，可以使用圖片 替代 submit 按鈕，但有一些控制元件，比如 radio，select， textarea，檔案選擇框，是永遠都不可能一模一樣的。

　　字型的表現都有差異

　　先不談有的字型在有的系統中根本不存在，即時存在，它們在不同系統的渲染效果也不完全一樣，比如，Windows ClearType 支援 IE7，但不支援 IE6，導致同一個字型在 IE7 和 IE6 有不同的樣子。

　　A List Apart’s 文章字型在 IE6 and IE7 中的區別

　　使用 CSS 清零

　　使用 CSS 清零(CSS Reset)是實現跨瀏覽器相容的靈丹妙藥，CSS 清零可以消除不同瀏覽器對 margin，padding 這些屬性的預設表現，你可以更容易控制諸如對齊，間隙等等問題。推薦使用 Eric Meyer’s CSS 清零程式碼。

　　參考 SitePoint’s CSS 兼容表

　　SitePoint CSS Reference 是一個非常好的資源(下載離線版)，可以用來檢查某些 CSS 屬性的跨瀏覽器相容問題

　　結語

　　跨瀏覽器相容是個永恆的話題，本文介紹的跨瀏覽器相容 CSS 準則只是幫助 Web 開發設計者儘可能實現這一目標，除了這些，基於 CSS3 的漸進式增強設計也是一種趨勢，Web 開發與設計者可以針對某些瀏覽器提供增強功能，而在不支援這些增強功能的瀏覽器中降級使用基本功能。