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

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

　　好了，funny部分結(jié)束，按回我的習(xí)慣直入正題。之所以說(shuō)IE不好，是因?yàn)镮E會(huì)誤導(dǎo)了你對(duì)CSS模型的理解，讓你以為IE的理解是對(duì)的，之后無(wú)論如何你都無(wú)法用你的IE模型理論去為你那個(gè)無(wú)法在FF正常顯示的CSS提供fix。更加壞的事情是，即使你僅僅針對(duì)IE設(shè)計(jì)，不考慮其它瀏覽器，由于IE模型絕對(duì)可以說(shuō)是一只讓人難以捉摸其脾氣的怪物，所以你單純?yōu)镮E設(shè)計(jì)也會(huì)遇到眾多難題，發(fā)現(xiàn)很多的效果總是繞來(lái)繞去都難以實(shí)現(xiàn)。

　　我們都知道，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è)研究方向是否感興趣很可能是完全靠偶然事件決定的，這就好像人第一次打羽毛球，如果你贏了幾盤你就會(huì)感興趣，如果你一直都贏不了你就會(huì)沒(méi)興趣”。IE在需要復(fù)雜繁縟的CSS這一點(diǎn)上，就足以令大多數(shù)的入門者卻步。你總感覺(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)該是松耦合的。“CSS應(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>