作為 Web 設(shè)計(jì)師，你的網(wǎng)站在各種瀏覽器中有完全一樣的表現(xiàn)是很多人的目標(biāo)，然而這是一個(gè)永遠(yuǎn)無(wú)法真正實(shí)現(xiàn)的目標(biāo)，很多人認(rèn)為，完美的跨瀏覽器兼容并不必要，這樣說(shuō)雖然沒(méi)錯(cuò)，但在很多情形，一種近似的兼容還是很容易實(shí)現(xiàn)的，本文講的是各種跨瀏覽器兼容的 CSS 編碼準(zhǔn)則和技巧。

[[80527]]

理解 CSS 盒子模型

如果你想實(shí)現(xiàn)不需要很多奇巧淫技的跨瀏覽器兼容的 CSS 代碼，透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。

CSS 盒子模型負(fù)責(zé)處理以下事情:

一個(gè) blcok （區(qū)塊）級(jí)對(duì)象占據(jù)多大的空間；該對(duì)象的邊界，留白；盒子的尺寸；盒子與頁(yè)面其它元素的相對(duì)位置

CSS 盒子模型有以下準(zhǔn)則:

Block （區(qū)塊）對(duì)象都是矩形 （事實(shí)上所有對(duì)象都如此）；其尺寸由 width, height, padding, borders, 以及 margins 決定；如果不設(shè)置高度，該盒子的高度將自動(dòng)適應(yīng)其包含的內(nèi)容，加上留白等（除非使用了 float）；如果不設(shè)置寬度，一個(gè)非 float 型盒子水平上將充滿其父容器（扣除父容器的留白）

處理 block 級(jí)對(duì)象時(shí)，必須注意以下事項(xiàng):

如果一個(gè)盒子的寬度設(shè)置為 100%，它就不能再設(shè)置 margins, padding, 和 borders，否則會(huì)撐破其父容器

垂直毗鄰的 margin 會(huì)引起復(fù)雜的坍塌問(wèn)題，導(dǎo)致布局問(wèn)題（比如兩個(gè)垂直毗鄰的 Block 對(duì)象，上面的對(duì)象的 bottom-margin 為 40，下面的對(duì)象的 top-margin 為 20，則兩個(gè)對(duì)象的間距將是 40，而不是 60 - 譯者）

擁有相對(duì)位置和絕對(duì)位置的對(duì)象，擁有不同的行為

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

理解 block 級(jí)和 inline 級(jí) 對(duì)象的區(qū)別

這個(gè)看似簡(jiǎn)單的問(wèn)題事如果能透徹地理解，會(huì)受益匪淺。

下圖講解了 block 級(jí)對(duì)象和 inline 級(jí)對(duì)象的區(qū)別:

下面是 block 級(jí)對(duì)象和 inline 級(jí)對(duì)象的基本區(qū)別:

Block 級(jí)對(duì)象會(huì)自然地水平充滿其父容器，因此沒(méi)有必要為之設(shè)置 100% 寬度屬性

Block 級(jí)對(duì)象的起始擺放位置是其父容器的左上邊界，并順排在其前面的兄弟 Block 對(duì)象的下方（除非設(shè)置 float 或絕對(duì)位置）

Inline 級(jí)對(duì)象會(huì)忽略其寬度和高度設(shè)置

nline 級(jí)對(duì)象會(huì)隨著文字排版，并受排版屬性的影響（如 white-space, font-size, letter-spacing）

Inline 級(jí)對(duì)象可以使用 vertical-align 屬性控制其垂直對(duì)齊，block 級(jí)對(duì)象不可以

Inline 級(jí)對(duì)象的下方會(huì)保留一些自然的空間，以適應(yīng)字母 g 一類的會(huì)向下探出的筆畫

一個(gè)設(shè)置為 float 的 inline 對(duì)象將變成 block 對(duì)象

理解 Floating 和 Clearing 屬性

實(shí)現(xiàn)多欄排版的最好方法是使用 float 屬性，float 也是一個(gè)將使你受益匪淺的屬性。一個(gè) float 對(duì)象可以居左或居右，一個(gè)設(shè)置為 float 的對(duì)象，將根據(jù)設(shè)置的方向，左移或右移到其父容器的邊界，或其前面的 float 對(duì)象的邊界，而緊隨其后的非 float 對(duì)象或內(nèi)容，則包圍在其相反的方向。

以下是使用 float 和 clear 屬性的一些重要準(zhǔn)則:

一個(gè) float 對(duì)象，將從其置身的 block 級(jí)非 float 內(nèi)容流中跳出，換句話說(shuō)，如果你要將一個(gè) box 向左邊 float，它后面的 block 級(jí)非 float 對(duì)象會(huì)顯示到下方，inline 級(jí)內(nèi)容會(huì)在旁邊包圍

要讓一段內(nèi)容從一側(cè)包圍一個(gè) float 對(duì)象，這段內(nèi)容必須要么是 inline 級(jí)的，要么也設(shè)置為相同方向的 float

一個(gè) float 對(duì)象，如果沒(méi)有設(shè)置寬度，則會(huì)自動(dòng)縮成其包含的內(nèi)容的寬度，因此最好為 float 對(duì)象明確設(shè)置寬度

如果一個(gè) block 對(duì)象包含 float 子對(duì)象，會(huì)出現(xiàn)本文中闡述的問(wèn)題。

一個(gè)設(shè)置了 clear 屬性的對(duì)象，將不會(huì)包圍其前面的 float 對(duì)象

一個(gè)既設(shè)置了 clear 又設(shè)置了 float 屬性的對(duì)象，只有 clear:left 屬性生效，clear:right 不起作用

#p#

首先使用 IE 進(jìn)行測(cè)試

雖然我們都痛恨 IE6 和 IE7，但當(dāng)你開始一個(gè)新項(xiàng)目的時(shí)候，最好還是首先針對(duì)這兩種瀏覽器進(jìn)行測(cè)試，否則，如果你在設(shè)計(jì)在后期才想起針對(duì) IE6 和 IE7 進(jìn)行測(cè)試，將出現(xiàn)以下問(wèn)題：

你將不得不使用一些奇巧淫技，甚至使用獨(dú)立的 IE6/7 CSS，導(dǎo)致 CSS 文件臃腫。

某些地方的布局將不得不重新設(shè)計(jì)

會(huì)增加測(cè)試的時(shí)間

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

如果你設(shè)計(jì)的是個(gè)人項(xiàng)目，Web 程序等，則不建議你針對(duì)舊版本 IE 做太多工作，而對(duì)一些公司類站點(diǎn)，它的用戶群中有大量 IE 用戶，這些技巧會(huì)讓你避免大量的頭痛。如果將 IE 的問(wèn)題歸類為 IE 的 BUG 而不去處理，會(huì)帶來(lái)很多負(fù)面的影響，和 IE 和平共處是 Web 開發(fā)與設(shè)計(jì)者不可逃避的現(xiàn)實(shí)。

IE 瀏覽器最常見的問(wèn)題

IE6 中不可濫用 float，否則會(huì)帶來(lái)內(nèi)容消失以及文字重復(fù)等稀奇古怪的問(wèn)題

IE6 中，float 對(duì)象，在 float 方向的那邊，會(huì)出現(xiàn)雙倍 margin，將 display 設(shè)置為 inline 會(huì)解決這個(gè)問(wèn)題

IE6/7 中，一個(gè)沒(méi)有直接或間接設(shè)置 hasLayout 的對(duì)象，會(huì)發(fā)生各種稀奇古怪的問(wèn)題 （譯者注：對(duì)這類問(wèn)題，zoom 這個(gè) css 屬性可以幫很大的忙，將 zoom 設(shè)置為除了 normal 之外的其它值，可以迫使一個(gè)對(duì)象 hasLayout 同時(shí)不影響這個(gè)對(duì)象的任何視覺外觀）

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

IE6 不支持固定位置背景圖

IE6/7 不支持很多 display 屬性值（如 inline-table, table-cell, table-row）

IE6 中，只有 a 這個(gè)對(duì)象才可以使用 :hover 這個(gè)偽類

IE 的某些版本對(duì)某些 CSS 選擇器支持很少（如屬性選擇器，子對(duì)象選擇器）

IE6~8 對(duì) CSS3 的支持很有限 (不過(guò)有一些變通方法)

永遠(yuǎn)不要指望在所有瀏覽器中都一模一樣

在不同瀏覽器實(shí)現(xiàn)相同的體驗(yàn)個(gè)功能是可能的，實(shí)現(xiàn)近似像素級(jí)的一致外觀也是可能的，但永遠(yuǎn)不要指望一模一樣。

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

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

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

字體的表現(xiàn)都有差異

先不談?dòng)械淖煮w在有的系統(tǒng)中根本不存在，即時(shí)存在，它們?cè)诓煌到y(tǒng)的渲染效果也不完全一樣，比如，Windows ClearType 支持 IE7，但不支持 IE6，導(dǎo)致同一個(gè)字體在 IE7 和 IE6 有不同的樣子。

A List Apart’s 文章字體在 IE6 and IE7 中的區(qū)別

#p#

使用 CSS 清零

使用 CSS 清零（CSS Reset）是實(shí)現(xiàn)跨瀏覽器兼容的靈丹妙藥，CSS 清零可以消除不同瀏覽器對(duì) margin，padding 這些屬性的默認(rèn)表現(xiàn)，你可以更容易控制諸如對(duì)齊，間隙等等問(wèn)題。推薦使用 Eric Meyer’s CSS 清零代碼。

參考 SitePoint’s CSS 兼容表

SitePoint CSS Reference 是一個(gè)非常好的資源（下載離線版），可以用來(lái)檢查某些 CSS 屬性的跨瀏覽器兼容問(wèn)題

結(jié)語(yǔ)

跨瀏覽器兼容是個(gè)永恒的話題，本文介紹的跨瀏覽器兼容 CSS 準(zhǔn)則只是幫助 Web 開發(fā)設(shè)計(jì)者盡可能實(shí)現(xiàn)這一目標(biāo)，除了這些，基于 CSS3 的漸進(jìn)式增強(qiáng)設(shè)計(jì)也是一種趨勢(shì)，Web 開發(fā)與設(shè)計(jì)者可以針對(duì)某些瀏覽器提供增強(qiáng)功能，而在不支持這些增強(qiáng)功能的瀏覽器中降級(jí)使用基本功能。