更加壞的事情是，即使你僅僅針對IE設計，不考慮其它瀏覽器，由于IE模型絕對可以說是一只讓人難以捉摸其脾氣的怪物，所以你單純?yōu)镮E設計也會遇到眾多難題，發(fā)現(xiàn)很多的效果總是繞來繞去都難以實現(xiàn)。
我們都知道，XHTML+CSS的目標就是實現(xiàn)內(nèi)容與表現(xiàn)分離，理論上對于任何特定一份內(nèi)容，我們都可以通過CSS實現(xiàn)任何我們想要的表現(xiàn)形式，或者細致地說是布局形式。雖然現(xiàn)實與這個目標有一定差距，但是CSS已經(jīng)能夠滿足大多數(shù)常見的布局需求，這有CSS Zen Garden為證。然而如果你用的是IE，因為它難以捉摸，所以如果你想用一種簡單優(yōu)雅的CSS去讓IE能夠?qū)崿F(xiàn)“任何你想要的布局形式”，那是不可能的，只有復雜繁縟的CSS才能夠在IE上滿足你的需求。我曾經(jīng)提到過一種理論，“一個人對一個研究方向是否感興趣很可能是完全靠偶然事件決定的，這就好像人第一次打羽毛球，如果你贏了幾盤你就會感興趣，如果你一直都贏不了你就會沒興趣”。IE在需要復雜繁縟的CSS這一點上，就足以令大多數(shù)的入門者卻步。你總感覺到不得要領(lǐng)，你自然沒興趣學下去。
舉一個例子說明這個問題，例如你不知道IE有hasLayout這回事，一個元素是否hasLayout對它的布局方式有重大影響，于是你肯定用最簡單的思維去思考CSS，認為不同的CSS規(guī)則之間應該是松耦合的?！癈SS應該被設計為簡單優(yōu)雅的”，你肯定會這樣想，沒錯，它確實被設計為這樣，不過IE不是這樣去實現(xiàn)CSS罷了。我們用下面的代碼去證明IE在quirks mode與standards mode之間的區(qū)別：
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看看結(jié)果如何，并且一個初學者看到這樣的結(jié)果會去如何理解CSS規(guī)則。在quirks mode中，我們可以看到背景為紅色的div />包含了上面1行的文本，以及下面向左浮動的img />（自然也就包括在浮動塊右邊的文本），在這里，我們可以建立兩種認識：
- 容器是完整包含內(nèi)容的，當內(nèi)容的總高度比容器大的時候，容器就會自然伸展以確保容納內(nèi)容。
- 浮動塊也屬于上述條件所要求通過伸展以確保容納內(nèi)容。
以上規(guī)則是完全錯誤的，一個懂得標準CSS以及理解quirks mode的設計師將會如此解釋他的理解：
- 因為IE在quirks mode中會將height理解為min-height，所以它認為div />的高度不小于height指定的30px即可。而根據(jù)CSS標準，當height設置為30px時，高度就一定是30px，超出部分如何處理則由專門的CSS規(guī)則決定。
- 因為div />被設置了height屬性，在IE中這就讓它hasLayout了，這就導致它一定要包含所有的內(nèi)容，包括浮動塊。而根據(jù)CSS標準，浮動塊是無需被完全包含的，它就浮動在那里，除非遇到設置了clear屬性的元素，否則后繼內(nèi)容只會側(cè)移避讓。
好了，相信這個對比足以說明問題的嚴重性了，通過IE的效果去理解CSS，最終只會讓你的理解與真實的CSS相差甚遠。詳細的standards mode與quirks mode帶來的標準執(zhí)行差別，可以參考這篇文章：CSS Quirks mode and strict mode。
然后肯定有人要問我，如果通過doctype確保使用的是standards mode，那是不是就沒問題了呢？standards mode確實會讓IE對CSS的解釋合理很多，但事情并沒有那么簡單，這你可以通過實踐去慢慢體會。你可以嘗試在standards mode中設計CSS，并且盡力保持它們在IE/FF/Opera/Safari這4大主流瀏覽器中顯示一致，隨著設計的進行，你會發(fā)現(xiàn)這不是那么容易做到的。或許你不樂意花時間去fix其中的一些小問題，寧愿任由其中一些瀏覽器的用戶看到比較丑陋的布局，但至少你已經(jīng)了解到一個和上面例子類似的道理：不同瀏覽器即使同樣在standards mode，其對CSS的理解仍然有所差異，而差異當中最多只可能有一個是正確的，甚至可能全部都是錯誤的。這篇CSS contents and browser compatibility就列舉了眾多瀏覽器對CSS支持的差異，一份CSS總會因為其中有一些規(guī)則在某些瀏覽器上是不支持的或者是buggy的，而導致你難以保持它們在不同瀏覽器上顯示一致。
接下來可能還有人會問我，既然IE的市場份額最大（特別是在入門級的用戶當中），又或者說我的客戶指定使用IE作為客戶端，僅僅針對IE設計CSS不好嗎？為什么要針對FF之類的標準瀏覽器設計CSS然后再為IE進行fix？因為IE難以捉摸的脾氣，讓你無法將它的行為理解為一種簡單優(yōu)雅的規(guī)則，然后讓你陷入CSS規(guī)則高度耦合的困境中。請看下面的例子：
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>
現(xiàn)在，你在IE中看到的效果應該是左邊出現(xiàn)img />，然后兩個div />內(nèi)的Hello都向右偏移以避讓img />這個浮動塊了，其中上面的div />僅僅占用移行的高度，因為它沒有聲明高度，所以就是自然高度，也就是一樣，這些都很好理解，所有規(guī)則都是解耦的。然后向例子中增加對第一個div />的width屬性復制，看看結(jié)果會如何：
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而必須容納所有內(nèi)容？正解，這就是IE難以馴服的地方，一個應該是完全獨立的width屬性，設置之后引起了高度以外的其它影響，這讓人無法嘗試以一種簡單優(yōu)雅的方式去理解IE的行為。這就證明了，如果你要學習如何為IE設計CSS，就先要學習標準CSS，再加上對IE怪異行為的理解，比僅僅學習如何為一個標準瀏覽器設計要難多了。這時候你是不是想說，“如果客戶愿意放棄IE，甚至全世界都愿意放棄IE，那就實在太美好了”，沒錯，這才是正確的想法，一心想著僅針對IE設計以求方便只會讓你走火入魔。
最后，如果你已經(jīng)有了一定的CSS基礎，對CSS規(guī)則都理解無偏差，卻缺乏組合CSS規(guī)則的想象力，無法做到所謂的“實現(xiàn)任何你想要的布局效果”，這也就是說，你的內(nèi)功已練成，僅僅差一些表面的套路，這時候我推薦你去看《CSS Mastery/精通CSS》?？赐赀@本書，相信你只會覺得自己缺乏布局的創(chuàng)造能力，而不會有布局卻不知道如何實現(xiàn)。另外，如果你關(guān)注CSS方面的內(nèi)容，可以考慮訂閱我的blog：
- Cat in Chinese (feed: http://feeds.feedburner.com/CatChen/Chinese)
- Cat in dotNET (feed: http://feeds.feedburner.com/CatChen/dotNET)
過年之后，我可能會寫一些與ASP.NET+CSS有關(guān)的文章，因為現(xiàn)在ASP.NET+CSS的開發(fā)并不方便，即使用了ASP.NET 2.0 CSS Friendly Control Adapters也如此，因此需要根據(jù)自己的實際情況定制配對的Control Adapter才能解決問題，這就是我接下來要研究的事情。
