要想灵活运用CSS有必要扔掉IE吗?
曾经，我也属于为IE所累的行列，如今见到很多人仍然不愿意对自己的宝贝IE下手，所以决定特异写篇文章说说此事，以明辨IE到底是宝贝还是累赘。
“Win国天下，欲练CSS之人不在少数，大多不得要领，又或是走火入魔，全为IE所累。故曰：欲练CSS，必先功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。
