編寫跨浏覽器相容的 CSS 代碼的金科玉律

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

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

一個 blcok （區塊）級對象占據多大的空間

該對象的邊界，留白

盒子的尺寸

盒子與頁面其它元素的相對位置

CSS 盒子模型有以下準則:

Block （區塊）對象都是矩形 （事實上所有對象都如此）

其尺寸由 width, height, padding, borders, 以及 margins 決定

如果不設定高度，該盒子的高度将自動适應其包含的内容，加上留白等（除非使用了 float）

如果不設定寬度，一個非 float 型盒子水準上将充滿其父容器（扣除父容器的留白）

處理 block 級對象時，必須注意以下事項:

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

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

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

下圖講解了 block 級對象和 inline 級對象的差別:

下面是 block 級對象和 inline 級對象的基本差別:

Block 級對象會自然地水準充滿其父容器，是以沒有必要為之設定 100% 寬度屬性

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

Inline 級對象會忽略其寬度和高度設定

<code>Inline 級對象會随着文字排版，并受排版屬性的影響（如 white-space, font-size, letter-spacing）</code>

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

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

一個設定為 float 的 inline 對象将變成 block 對象

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

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

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

一個 float 對象，如果沒有設定寬度，則會自動縮成其包含的内容的寬度，是以最好為 float 對象明确設定寬度

一個設定了 clear 屬性的對象，将不會包圍其前面的 float 對象

一個既設定了 clear 又設定了 float 屬性的對象，隻有 clear:left 屬性生效，clear:right 不起作用

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

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

某些地方的布局将不得不重新設計

會增加測試的時間

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

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

譯者注：在 IE6/7 仍有大量使用者基礎的國内（感謝中行，建行，農行，工行，以及各級政府網站），忽視這兩種浏覽器是極不明智的，首先針對 IE6/7 進行設計是一種很好的方法，一般來說，在IE6/7 通過測試的站點，在 Firefox，Chrome，Safari，Opera 等标準浏覽器面前基本不會出現問題，前提是，你的 CSS 設計是基于 W3C 标準的。

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

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

<code>IE6 不支援 min-width, max-width, min-height, max-height 一類的屬性</code>

IE6 不支援固定位置背景圖

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

IE6 中，隻有 a 這個對象才可以使用 :hover 這個僞類

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

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

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

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/CMS_K975.aspx" target="_blank">跨浏覽器測試資源大全</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K735.aspx" target="_blank">跨浏覽器相容測試8大利器</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K973.aspx" target="_blank">關于跨浏覽器測試那點事</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>

歡迎任何形式的轉載，但請務必注明出處。