欲練 CSS ，必先宮 IE

睡蓮 — 2008-09-05T13:55:00+02:00

類別: 標準之路
來源: (Cat in dotNET)
摘要: 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設計以求方便只會讓你走火入魔。

最後，如果你已經有了一定的CSS基礎，對CSS規則都理解無偏差，卻缺乏組合CSS規則的想象力，無法做到所謂的“實現任何你想要的佈局效果”，這也就是說，你的內功已練成，僅僅差一些表面的套路，這時候我推薦你去看《CSS Mastery/精通CSS》。看完這本書，相信你只會覺得自己缺乏佈局的創造能力，而不會有佈局卻不知道如何實現。另外，如果你關注CSS方面的內容，可以考慮訂閱我的blog：

* Cat in Chinese (feed: http://feeds.feedburner.com/CatChen/Chinese)
* Cat in dotNET (feed: http://feeds.feedburner.com/CatChen/dotNET)

過年之後，我可能會寫一些與ASP.NET+CSS有關的文章，因為現在ASP.NET+CSS的開發並不方便，即使用了ASP.NET 2.0 CSS Friendly Control Adapters也如此，因此需要根據自己的實際情況定制配對的Control Adapter才能解決問題，這就是我接下來要研究的事情。

睡蓮‧池水間 :: 文章

欲練 CSS ，必先宮 IE