|
|
作為 Web 設(shè)計(jì)師，你的網(wǎng)站在各種瀏覽器中有完全一樣的表現(xiàn)是很多人的目標(biāo)，然而這是一個永遠(yuǎn)無法真正實(shí)現(xiàn)的目標(biāo)，很多人認(rèn)為，完美的跨瀏覽器兼容并不必要，這樣說雖然沒錯，但在很多情形，一種近似的兼容還是很容易實(shí)現(xiàn)的，本文講的是各種跨瀏覽器兼容的 CSS 編碼準(zhǔn)則和技巧。
理解 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)致布局問題（比如兩個垂直毗鄰的 Block 對象，上面的對象的 bottom-margin 為 40，下面的對象的 top-margin 為 20，則兩個對象的間距將是 40，而不是 60 - 譯者）
- 擁有相對位置和絕對位置的對象，擁有不同的行為
在 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)容，則包圍在其相反的方向。
以下是使用 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ā)生各種稀奇古怪的問題 （譯者注：對這類問題，zoom 這個css 屬性可以幫很大的忙，將 zoom 設(shè)置為除了 normal 之外的其它值，可以迫使一個對象 hasLayout同時不影響這個對象的任何視覺外觀）
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)不要指望一模一樣。
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 有不同的樣子。
A List Apart’s 文章字體在 IE6 and IE7 中的區(qū)別
使用 CSS 清零
使用 CSS 清零（CSS Reset）是實(shí)現(xiàn)跨瀏覽器兼容的靈丹妙藥，CSS 清零可以消除不同瀏覽器對 margin，padding 這些屬性的默認(rèn)表現(xiàn)，你可以更容易控制諸如對齊，間隙等等問題。推薦使用 Eric Meyer’s CSS 清零代碼。
參考 SitePoint’s CSS 兼容表
SitePoint CSS Reference 是一個非常好的資源（下載離線版），可以用來檢查某些 CSS 屬性的跨瀏覽器兼容問題
結(jié)語
跨瀏覽器兼容是個永恒的話題，本文介紹的跨瀏覽器兼容 CSS 準(zhǔn)則只是幫助 Web 開發(fā)設(shè)計(jì)者盡可能實(shí)現(xiàn)這一目標(biāo)，除了這些，基于 CSS3 的漸進(jìn)式增強(qiáng)設(shè)計(jì)也是一種趨勢，Web 開發(fā)與設(shè)計(jì)者可以針對某些瀏覽器提供增強(qiáng)功能，而在不支持這些增強(qiáng)功能的瀏覽器中降級使用基本功能。
本文國際來源：Smashing Magazine The Principles Of Cross-Browser CSS Coding
原文作者：Louis Lazaris
Louis Lazaris 是一位自由職業(yè) Web 開發(fā)者，住在多倫多，他創(chuàng)辦了 Impressive Webs, 以及 Interviews by Design，后者主要是一些著名 Web 設(shè)計(jì)師訪談，他的 Twitter 地址是 http://twitter.com/ImpressiveWebs。
it知識庫：編寫跨瀏覽器兼容的 CSS 代碼的金科玉律，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
