要想灵活运用CSS有必要扔掉IE吗?
然后肯定有人要问我，如果通过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》。看完这本书，相信你只会觉得自己缺乏布局的创造能力，而不会有布局却不知道如何实现。
