跨瀏覽器開發(fā)：CSS代碼的金科玉律
作為Web設(shè)計(jì)師，你的網(wǎng)站在各種瀏覽器中有完全一樣的表現(xiàn)是很多人的目標(biāo)，然而這是一個永遠(yuǎn)無法真正實(shí)現(xiàn)的目標(biāo)，很多人認(rèn)為，***的跨瀏覽器兼容并不必要，這樣說雖然沒錯，但在很多情形，一種近似的兼容還是很容易實(shí)現(xiàn)的。
51CTO推薦閱讀：Web標(biāo)準(zhǔn)化 跨瀏覽器開發(fā)教程
理解CSS盒子模型
如果你想實(shí)現(xiàn)不需要很多奇巧淫技的跨瀏覽器兼容的 CSS 代碼，透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。CSS 盒子模型負(fù)責(zé)處理以下事情:
◆一個blcok（區(qū)塊）級對象占據(jù)多大的空間
◆該對象的邊界，留白
◆盒子的尺寸
◆盒子與頁面其它元素的相對位置
CSS 盒子模型有以下準(zhǔn)則：
◆Block （區(qū)塊）對象都是矩形 （事實(shí)上所有對象都如此）
◆其尺寸由 width, height, padding, borders, 以及margins決定
◆如果不設(shè)置高度，該盒子的高度將自動適應(yīng)其包含的內(nèi)容，加上留白等（除非使用了 float）
◆如果不設(shè)置寬度，一個非 float 型盒子水平上將充滿其父容器（扣除父容器的留白）
◆處理 block 級對象時，必須注意以下事項(xiàng)：
◆如果一個盒子的寬度設(shè)置為 100%，它就不能再設(shè)置 margins, padding, 和 borders，否則會撐破其父容器
◆垂直毗鄰的 margin 會引起復(fù)雜的坍塌問題，導(dǎo)致布局問題
◆擁有相對位置和絕對位置的對象，擁有不同的行為
在 Firefox 的 Firebug 中顯示的盒子模型
理解 block 級和 inline 級 對象的區(qū)別。這個看似簡單的問題事如果能透徹地理解，會受益匪淺。
下圖講解了 block 級對象和 inline 級對象的區(qū)別:
下面是 block 級對象和 inline 級對象的基本區(qū)別:
◆Block 級對象會自然地水平充滿其父容器，因此沒有必要為之設(shè)置 100% 寬度屬性。
◆Block 級對象的起始擺放位置是其父容器的左上邊界，并順排在其前面的兄弟 Block 對象的下方（除非設(shè)置 float 或絕對位置）。
◆Inline 級對象會忽略其寬度和高度設(shè)置。
◆Inline 級對象會隨著文字排版，并受排版屬性的影響（如 white-space, font-size, letter-spacing）。
◆Inline 級對象可以使用 vertical-align 屬性控制其垂直對齊，block 級對象不可以。
◆Inline 級對象的下方會保留一些自然的空間，以適應(yīng)字母 g 一類的會向下探出的筆畫。
◆一個設(shè)置為 float 的 inline 對象將變成 block 對象理解Floating和Clearing屬性。
實(shí)現(xiàn)多欄排版的***方法是使用float屬性，float也是一個將使你受益匪淺的屬性。一個 float 對象可以居左或居右，一個設(shè)置為 float 的對象，將根據(jù)設(shè)置的方向，左移或右移到其父容器的邊界，或其前面的 float 對象的邊界，而緊隨其后的非 float 對象或內(nèi)容，則包圍在其相反的方向。
#p#
以下是使用float和clear屬性的一些重要準(zhǔn)則:
◆一個 float對象，將從其置身的 block 級非 float 內(nèi)容流中跳出，換句話說，如果你要將一個 box 向左邊 float，它后面的 block 級非 float 對象會顯示到下方，inline級內(nèi)容會在旁邊包圍。
◆要讓一段內(nèi)容從一側(cè)包圍一個 float 對象，這段內(nèi)容必須要么是 inline 級的，要么也設(shè)置為相同方向的 float。
◆一個 float 對象，如果沒有設(shè)置寬度，則會自動縮成其包含的內(nèi)容的寬度，因此***為 float 對象明確設(shè)置寬度。
◆如果一個 block 對象包含 float 子對象，會出現(xiàn)本文中闡述的問題。
◆一個設(shè)置了 clear 屬性的對象，將不會包圍其前面的 float 對象。
◆一個既設(shè)置了 clear 又設(shè)置了 float 屬性的對象，只有 clear:left 屬性生效，clear:right 不起作用首先使用 IE 進(jìn)行測試。
雖然我們都痛恨 IE6 和 IE7，但當(dāng)你開始一個新項(xiàng)目的時候，***還是首先針對這兩種瀏覽器進(jìn)行測試，否則，如果你在設(shè)計(jì)在后期才想起針對 IE6 和 IE7 進(jìn)行測試，將出現(xiàn)以下問題：
◆你將不得不使用一些奇巧淫技，甚至使用獨(dú)立的 IE6/7 CSS，導(dǎo)致 CSS 文件臃腫。
◆某些地方的布局將不得不重新設(shè)計(jì)。
◆會增加測試的時間。
◆你的布局在 IE/6/7 中和其它瀏覽器中不一樣
如果你設(shè)計(jì)的是個人項(xiàng)目，Web 程序等，則不建議你針對舊版本 IE 做太多工作，而對一些公司類站點(diǎn)，它的用戶群中有大量 IE 用戶，這些技巧會讓你避免大量的頭痛。如果將 IE 的問題歸類為 IE 的 BUG 而不去處理，會帶來很多負(fù)面的影響，和 IE 和平共處是 Web 開發(fā)與設(shè)計(jì)者不可逃避的現(xiàn)實(shí)。
譯者注：在 IE6/7 仍有大量用戶基礎(chǔ)的國內(nèi)（感謝中行，建行，農(nóng)行，工行，以及各級政府網(wǎng)站），忽視這兩種瀏覽器是極不明智的，首先針對 IE6/7 進(jìn)行設(shè)計(jì)是一種很好的方法，一般來說，在IE6/7 通過測試的站點(diǎn)，在 Firefox，Chrome，Safari，Opera 等標(biāo)準(zhǔn)瀏覽器面前基本不會出現(xiàn)問題，前提是，你的 CSS 設(shè)計(jì)是基于 W3C 標(biāo)準(zhǔn)的。
IE瀏覽器最常見的問題
◆IE6中不可濫用 float，否則會帶來內(nèi)容消失以及文字重復(fù)等稀奇古怪的問題。
◆IE6 中，float 對象，在 float 方向的那邊，會出現(xiàn)雙倍 margin，將 display 設(shè)置為 inline 會解決這個問題。
◆IE6/7 中，一個沒有直接或間接設(shè)置 hasLayout 的對象，會發(fā)生各種稀奇古怪的問題。
◆IE6 不支持 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 的支持很有限 (不過有一些變通方法) 永遠(yuǎn)不要指望在所有瀏覽器中都一模一樣。
◆在不同瀏覽器實(shí)現(xiàn)相同的體驗(yàn)個功能是可能的，實(shí)現(xiàn)近似像素級的一致外觀也是可能的，但永遠(yuǎn)不要指望一模一樣。
#p#
Form控件在不同瀏覽器顯示總是不同
以下是Facebook首頁中的select控件，在5種不同瀏覽器的顯示差異（基于 Adobe’s Browserlab 截圖）
某些Form控件，如果要求必須跨瀏覽器一致，可以找到變通辦法，如，可以使用圖片替代submit按鈕，但有一些控件，比如 radio，select， textarea，文件選擇框，是永遠(yuǎn)都不可能一模一樣的。
字體的表現(xiàn)都有差異
先不談有的字體在有的系統(tǒng)中根本不存在，即時存在，它們在不同系統(tǒng)的渲染效果也不完全一樣，比如，Windows ClearType 支持 IE7，但不支持 IE6，導(dǎo)致同一個字體在 IE7 和 IE6 有不同的樣子。
使用CSS清零
使用CSS清零是實(shí)現(xiàn)跨瀏覽器兼容的靈丹妙藥，CSS清零可以消除不同瀏覽器對margin，padding這些屬性的默認(rèn)表現(xiàn)，你可以更容易控制諸如對齊，間隙等等問題。
結(jié)語
跨瀏覽器兼容是個永恒的話題，本文介紹的跨瀏覽器兼容 CSS 準(zhǔn)則只是幫助 Web 開發(fā)設(shè)計(jì)者盡可能實(shí)現(xiàn)這一目標(biāo)，除了這些，基于CSS 3的漸進(jìn)式增強(qiáng)設(shè)計(jì)也是一種趨勢，Web 開發(fā)與設(shè)計(jì)者可以針對某些瀏覽器提供增強(qiáng)功能，而在不支持這些增強(qiáng)功能的瀏覽器中降級使用基本功能。
原文作者：Louis Lazaris
原文地址：http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/
【編輯推薦】
