[轉貼]欲練CSS,必先宮IE

楊俊明發表於2008-09-02

原文:http://www.cnblogs.com/cathsfz/archive/2007/02/18/652226.html

“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:

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


相關文章