“Win國天下，欲練CSS之人不在少數，大多不得要領，又或是走火入魔，全為IE所累。故曰：欲練CSS，必先功IE。”

　　曾經，我也屬于為IE所累的行列，如今見到很多人仍然不愿意對自己的寶貝IE下手，所以決定特異寫篇文章說說此事，以明辨IE到底是寶貝還是累贅。

　　好了，funny部分結束，按回我的習慣直入正題。之所以說IE不好，是因為IE會誤導了你對CSS模型的理解，讓你以為IE的理解是對的，之后無 論如何你都無法用你的IE模型理論去為你那個無法在FF正常顯示的CSS提供fix。更加壞的事情是，即使你僅僅針對IE設計，不考慮其它瀏覽器，由于 IE模型絕對可以說是一只讓人難以捉摸其脾氣的怪物，所以你單純為IE設計也會遇到眾多難題，發現很多的效果總是繞來繞去都難以實現。

　　我們都知道，XHTML+CSS的目標就是實現內容與表現分離，理論上對于任何特定一份內容，我們都可以通過CSS實現任何我們想要的表現形式，或者細致地說是布局形式。雖然現實與這個目標有一定差距，但是CSS已經能夠滿足大多數常見的布局需求，這有CSS Zen Garden為 證。然而如果你用的是IE，因為它難以捉摸，所以如果你想用一種簡單優雅的CSS去讓IE能夠實現“任何你想要的布局形式”，那是不可能的，只有復雜繁縟 的CSS才能夠在IE上滿足你的需求。我曾經提到過一種理論，“一個人對一個研究方向是否感興趣很可能是完全靠偶然事件決定的，這就好像人第一次打羽毛 球，如果你贏了幾盤你就會感興趣，如果你一直都贏不了你就會沒興趣”。IE在需要復雜繁縟的CSS這一點上，就足以令大多數的入門者卻步。你總感覺到不得 要領，你自然沒興趣學下去。

　　舉一個例子說明這個問題，例如你不知道IE有hasLayout這回事，一個元素是否hasLayout對它的布局方式有重大影響，于是你肯定用最 簡單的思維去思考CSS，認為不同的CSS規則之間應該是松耦合的。“CSS應該被設計為簡單優雅的”，你肯定會這樣想，沒錯，它確實被設計為這樣，不過 IE不是這樣去實現CSS罷了。我們用下面的代碼去證明IE在quirks mode與standards mode之間的區別：

<div style="background-color: red; height: 30px">
  <div>Hello</div>
  <img style="float: left; width: 200px; height: 160px" src="blank.gif" />
  <div>Hello</div>
</div>

　　首先，我們用quirks mode看看結果如何，并且一個初學者看到這樣的結果會去如何理解CSS規則。在quirks mode中，我們可以看到背景為紅色的<div />包含了上面1行的文本，以及下面向左浮動的<img />（自然也就包括在浮動塊右邊的文本），在這里，我們可以建立兩種認識：

1. 容器是完整包含內容的，當內容的總高度比容器大的時候，容器就會自然伸展以確保容納內容。
2. 浮動塊也屬于上述條件所要求通過伸展以確保容納內容。

　　以上規則是完全錯誤的，一個懂得標準CSS以及理解quirks mode的設計師將會如此解釋他的理解：

1. 因為IE在quirks mode中會將height理解為min-height，所以它認為<div />的高度不小于height指定的30px即可。而根據CSS標準，當height設置為30px時，高度就一定是30px，超出部分如何處理則 由專門的CSS規則決定。
2. 因為<div />被設置了height屬性，在IE中這就讓它hasLayout了，這就導致它一定要包含所有的內容，包括浮動塊。而根據CSS標準，浮動塊是無需被完全包含的，它就浮動在那里，除非遇到設置了clear屬性的元素，否則后繼內容只會側移避讓。

　　好了，相信這個對比足以說明問題的嚴重性了，通過IE的效果去理解CSS，最終只會讓你的理解與真實的CSS相差甚遠。詳細的standards mode與quirks mode帶來的標準執行差別，可以參考這篇文章：CSS Quirks mode and strict mode。

　　然后肯定有人要問我，如果通過doctype確保使用的是standards mode，那是不是就沒問題了呢？standards mode確實會讓IE對CSS的解釋合理很多，但事情并沒有那么簡單，這你可以通過實踐去慢慢體會。你可以嘗試在standards mode中設計CSS，并且盡力保持它們在IE/FF/Opera/Safari這4大主流瀏覽器中顯示一致，隨著設計的進行，你會發現這不是那么容易做 到的。或許你不樂意花時間去fix其中的一些小問題，寧愿任由其中一些瀏覽器的用戶看到比較丑陋的布局，但至少你已經了解到一個和上面例子類似的道理：不 同瀏覽器即使同樣在standards mode，其對CSS的理解仍然有所差異，而差異當中最多只可能有一個是正確的，甚至可能全部都是錯誤的。這篇CSS contents and browser compatibility就列舉了眾多瀏覽器對CSS支持的差異，一份CSS總會因為其中有一些規則在某些瀏覽器上是不支持的或者是buggy的，而導致你難以保持它們在不同瀏覽器上顯示一致。

　　接下來可能還有人會問我，既然IE的市場份額最大（特別是在入門級的用戶當中），又或者說我的客戶指定使用IE作為客戶端，僅僅針對IE設計CSS 不好嗎？為什么要針對FF之類的標準瀏覽器設計CSS然后再為IE進行fix？因為IE難以捉摸的脾氣，讓你無法將它的行為理解為一種簡單優雅的規則，然 后讓你陷入CSS規則高度耦合的困境中。請看下面的例子：

<div style="background-color: red; border: 2px black solid">
  <img style="float: left; width: 200px; height: 160px" src="blank.gif" />
  <div>Hello</div>
</div>
<div>Hello</div>

　　現在，你在IE中看到的效果應該是左邊出現<img />，然后兩個<div />內的Hello都向右偏移以避讓<img />這個浮動塊了，其中上面的<div />僅僅占用移行的高度，因為它沒有聲明高度，所以就是自然高度，也就是一樣，這些都很好理解，所有規則都是解耦的。然后向例子中增加對第一 個<div />的width屬性復制，看看結果會如何：

<div style="background-color: red; border: 2px black solid; width: 600px">
  <img style="float: left; width: 200px; height: 160px" src="blank.gif" />
  <div>Hello</div>
</div>
<div>Hello</div>

　　這時候第一個<div />完全容納了<img />，把第二個<div />擠到下面了。這該怎么解釋呢？我們可沒有設置它的height屬性哦，難道又犯之前例子所說的因為hasLayout而必須容納所有內容？正 解，這就是IE難以馴服的地方，一個應該是完全獨立的width屬性，設置之后引起了高度以外的其它影響，這讓人無法嘗試以一種簡單優雅的方式去理解IE 的行為。這就證明了，如果你要學習如何為IE設計CSS，就先要學習標準CSS，再加上對IE怪異行為的理解，比僅僅學習如何為一個標準瀏覽器設計要難多 了。這時候你是不是想說，“如果客戶愿意放棄IE，甚至全世界都愿意放棄IE，那就實在太美好了”，沒錯，這才是正確的想法，一心想著僅針對IE設計以求 方便只會讓你走火入魔。