作為 Web 設計師,你的網站在各種浏覽器中有完全一樣的表現是很多人的目標,然而這是一個永遠無法真正實現的目標,很多人認為,完美的跨浏覽器兼容並不必要,這樣說雖然沒錯,但在很多情形,一種近似的兼容還是很容易實現的,本文講的是各種跨浏覽器兼容的 CSS 編碼准則和技巧。
如果你想實現不需要很多奇巧淫技的跨浏覽器兼容的 CSS 代碼,透徹地理解 CSS 盒子模型是首要事情,CSS 盒子模型並不難,且基本支持所有浏覽器,除了某些特定條件下的 IE 浏覽器。
CSS 盒子模型負責處理以下事情:
CSS 盒子模型有以下准則:
處理 block 級對象時,必須注意以下事項:
在 Firefox 的 Firebug 中顯示的盒子模型
這個看似簡單的問題事如果能透徹地理解,會受益匪淺。
下圖講解了 block 級對象和 inline 級對象的區別:
下面是 block 級對象和 inline 級對象的基本區別:
Inline 級對象會隨著文字排版,並受排版屬性的影響(如 white-space, font-size, letter-spacing)
實現多欄排版的最好方法是使用 float 屬性,float 也是一個將使你受益匪淺的屬性。一個 float 對象可以居左或居右,一個設置為 float 的對象,將根據設置的方向,左移或右移到其父容器的邊界,或其前面的 float 對象的邊界,而緊隨其後的非 float 對象或內容,則包圍在其相反的方向。
以下是使用 float 和 clear 屬性的一些重要准則:
雖然我們都痛恨 IE6 和 IE7,但當你開始一個新項目的時候,最好還是首先針對這兩種浏覽器進行測試,否則,如果你在設計在後期才想起針對 IE6 和 IE7 進行測試,將出現以下問題:
如果你設計的是個人項目,Web 程序等,則不建議你針對舊版本 IE 做太多工作,而對一些公司類站點,它的用戶群中有大量 IE 用戶,這些技巧會讓你避免大量的頭痛。如果將 IE 的問題歸類為 IE 的 BUG 而不去處理,會帶來很多負面的影響,和 IE 和平共處是 Web 開發與設計者不可逃避的現實。
譯者注:在 IE6/7 仍有大量用戶基礎的國內(感謝中行,建行,農行,工行,以及各級政府網站),忽視這兩種浏覽器是極不明智的,首先針對 IE6/7 進行設計是一種很好的方法,一般來說,在IE6/7 通過測試的站點,在 Firefox,Chrome,Safari,Opera 等標准浏覽器面前基本不會出現問題,前提是,你的 CSS 設計是基於 W3C 標准的。
IE6 不支持 min-width, max-width, min-height, max-height 一類的屬性
inline-table
,table-cell
,table-row
)在不同浏覽器實現相同的體驗個功能是可能的,實現近似像素級的一致外觀也是可能的,但永遠不要指望一模一樣。
以下是 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 Reset)是實現跨浏覽器兼容的靈丹妙藥,CSS 清零可以消除不同浏覽器對 margin,padding 這些屬性的默認表現,你可以更容易控制諸如對齊,間隙等等問題。推薦使用 Eric Meyer’s CSS 清零代碼。
SitePoint CSS Reference 是一個非常好的資源(下載離線版),可以用來檢查某些 CSS 屬性的跨浏覽器兼容問題
跨浏覽器兼容是個永恆的話題,本文介紹的跨浏覽器兼容 CSS 准則只是幫助 Web 開發設計者盡可能實現這一目標,除了這些,基於 CSS3 的漸進式增強設計也是一種趨勢,Web 開發與設計者可以針對某些浏覽器提供增強功能,而在不支持這些增強功能的浏覽器中降級使用基本功能。