我們都知道，XHTML+CSS的目標(biāo)就是實(shí)現(xiàn)內(nèi)容與表現(xiàn)分離，理論上對(duì)于任何特定一份內(nèi)容，我們都可以通過(guò)CSS實(shí)現(xiàn)任何我們想要的表現(xiàn)形式，或者細(xì)致地說(shuō)是布局形式。雖然現(xiàn)實(shí)與這個(gè)目標(biāo)有一定差距，但是CSS已經(jīng)能夠滿足大多數(shù)常見(jiàn)的布局需求，這有CSS Zen Garden為證。然而如果你用的是IE，因?yàn)樗y以捉摸，所以如果你想用一種簡(jiǎn)單優(yōu)雅的CSS去讓IE能夠?qū)崿F(xiàn)“任何你想要的布局形式”，那是不可能的，只有復(fù)雜繁縟的CSS才能夠在IE上滿足你的需求。我曾經(jīng)提到過(guò)一種理論，“一個(gè)人對(duì)一個(gè)研究方向是否感興趣很可能是完全靠偶然事件決定的，這就好像人第一次打羽毛球，如果你贏了幾盤(pán)你就會(huì)感興趣，如果你一直都贏不了你就會(huì)沒(méi)興趣”。IE在需要復(fù)雜繁縟的CSS這一點(diǎn)上，就足以令大多數(shù)的入門(mén)者卻步。你總感覺(jué)到不得要領(lǐng)，你自然沒(méi)興趣學(xué)下去。

舉一個(gè)例子說(shuō)明這個(gè)問(wèn)題，例如你不知道IE有hasLayout這回事，一個(gè)元素是否hasLayout對(duì)它的布局方式有重大影響，于是你肯定用最簡(jiǎn)單的思維去思考CSS，認(rèn)為不同的CSS規(guī)則之間應(yīng)該是松耦合的?！癈SS應(yīng)該被設(shè)計(jì)為簡(jiǎn)單優(yōu)雅的”，你肯定會(huì)這樣想，沒(méi)錯(cuò)，它確實(shí)被設(shè)計(jì)為這樣，不過(guò)IE不是這樣去實(shí)現(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é)果如何，并且一個(gè)初學(xué)者看到這樣的結(jié)果會(huì)去如何理解CSS規(guī)則。在quirks mode中，我們可以看到背景為紅色的<div />包含了上面1行的文本，以及下面向左浮動(dòng)的<img />（自然也就包括在浮動(dòng)塊右邊的文本），在這里，我們可以建立兩種認(rèn)識(shí)：

1. 容器是完整包含內(nèi)容的，當(dāng)內(nèi)容的總高度比容器大的時(shí)候，容器就會(huì)自然伸展以確保容納內(nèi)容。
2. 浮動(dòng)塊也屬于上述條件所要求通過(guò)伸展以確保容納內(nèi)容。

以上規(guī)則是完全錯(cuò)誤的，一個(gè)懂得標(biāo)準(zhǔn)CSS以及理解quirks mode的設(shè)計(jì)師將會(huì)如此解釋他的理解：

1. 因?yàn)镮E在quirks mode中會(huì)將height理解為min-height，所以它認(rèn)為<div />的高度不小于height指定的30px即可。而根據(jù)CSS標(biāo)準(zhǔn)，當(dāng)height設(shè)置為30px時(shí)，高度就一定是30px，超出部分如何處理則由專(zhuān)門(mén)的CSS規(guī)則決定。
2. 因?yàn)?lt;div />被設(shè)置了height屬性，在IE中這就讓它hasLayout了，這就導(dǎo)致它一定要包含所有的內(nèi)容，包括浮動(dòng)塊。而根據(jù)CSS標(biāo)準(zhǔn)，浮動(dòng)塊是無(wú)需被完全包含的，它就浮動(dòng)在那里，除非遇到設(shè)置了clear屬性的元素，否則后繼內(nèi)容只會(huì)側(cè)移避讓。

好了，相信這個(gè)對(duì)比足以說(shuō)明問(wèn)題的嚴(yán)重性了，通過(guò)IE的效果去理解CSS，最終只會(huì)讓你的理解與真實(shí)的CSS相差甚遠(yuǎn)。詳細(xì)的standards mode與quirks mode帶來(lái)的標(biāo)準(zhǔn)執(zhí)行差別，可以參考這篇文章：CSS Quirks mode and strict mode。

然后肯定有人要問(wèn)我，如果通過(guò)doctype確保使用的是standards mode，那是不是就沒(méi)問(wèn)題了呢？standards mode確實(shí)會(huì)讓IE對(duì)CSS的解釋合理很多，但事情并沒(méi)有那么簡(jiǎn)單，這你可以通過(guò)實(shí)踐去慢慢體會(huì)。你可以嘗試在standards mode中設(shè)計(jì)CSS，并且盡力保持它們?cè)贗E/FF/Opera/Safari這4大主流瀏覽器中顯示一致，隨著設(shè)計(jì)的進(jìn)行，你會(huì)發(fā)現(xiàn)這不是那么容易做到的?；蛟S你不樂(lè)意花時(shí)間去fix其中的一些小問(wèn)題，寧愿任由其中一些瀏覽器的用戶看到比較丑陋的布局，但至少你已經(jīng)了解到一個(gè)和上面例子類(lèi)似的道理：不同瀏覽器即使同樣在standards mode，其對(duì)CSS的理解仍然有所差異，而差異當(dāng)中最多只可能有一個(gè)是正確的，甚至可能全部都是錯(cuò)誤的。這篇CSS contents and browser compatibility就列舉了眾多瀏覽器對(duì)CSS支持的差異，一份CSS總會(huì)因?yàn)槠渲杏幸恍┮?guī)則在某些瀏覽器上是不支持的或者是buggy的，而導(dǎo)致你難以保持它們?cè)诓煌瑸g覽器上顯示一致。

接下來(lái)可能還有人會(huì)問(wèn)我，既然IE的市場(chǎng)份額最大（特別是在入門(mén)級(jí)的用戶當(dāng)中），又或者說(shuō)我的客戶指定使用IE作為客戶端，僅僅針對(duì)IE設(shè)計(jì)CSS不好嗎？為什么要針對(duì)FF之類(lèi)的標(biāo)準(zhǔn)瀏覽器設(shè)計(jì)CSS然后再為IE進(jìn)行fix？因?yàn)镮E難以捉摸的脾氣，讓你無(wú)法將它的行為理解為一種簡(jiǎn)單優(yōu)雅的規(guī)則，然后讓你陷入CSS規(guī)則高度耦合的困境中。請(qǐng)看下面的例子：
<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中看到的效果應(yīng)該是左邊出現(xiàn)<img />，然后兩個(gè)<div />內(nèi)的Hello都向右偏移以避讓<img />這個(gè)浮動(dòng)塊了，其中上面的<div />僅僅占用移行的高度，因?yàn)樗鼪](méi)有聲明高度，所以就是自然高度，也就是一樣，這些都很好理解，所有規(guī)則都是解耦的。然后向例子中增加對(duì)第一個(gè)<div />的width屬性復(fù)制，看看結(jié)果會(huì)如何：
<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>

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

最后，如果你已經(jīng)有了一定的CSS基礎(chǔ)，對(duì)CSS規(guī)則都理解無(wú)偏差，卻缺乏組合CSS規(guī)則的想象力，無(wú)法做到所謂的“實(shí)現(xiàn)任何你想要的布局效果”，這也就是說(shuō)，你的內(nèi)功已練成，僅僅差一些表面的套路，這時(shí)候我推薦你去看《CSS Mastery/精通CSS》。看完這本書(shū)，相信你只會(huì)覺(jué)得自己缺乏布局的創(chuàng)造能力，而不會(huì)有布局卻不知道如何實(shí)現(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)

過(guò)年之后，我可能會(huì)寫(xiě)一些與ASP.NET+CSS有關(guān)的文章，因?yàn)楝F(xiàn)在ASP.NET+CSS的開(kāi)發(fā)并不方便，即使用了ASP.NET 2.0 CSS Friendly Control Adapters也如此，因此需要根據(jù)自己的實(shí)際情況定制配對(duì)的Control Adapter才能解決問(wèn)題，這就是我接下來(lái)要研究的事情。

最新評(píng)論