欲练CSS ，必先解决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 />（自然也就包括在浮动块右边的文本），在这里，我们可以建立两种认识：
- 容器是完整包含内容的，当内容的总高度比容器大的时候，容器就会自然伸展以确保容纳内容。
- 浮动块也属于上述条件所要求通过伸展以确保容纳内容。
以上规则是完全错误的，一个懂得标准css以及理解quirks mode的设计师将会如此解释他的理解：
- 因为ie在quirks mode中会将height理解为min-height，所以它认为<div />的高度不小于height指定的30px即可。而根据css标准，当height设置为30px时，高度就一定是30px，超出部分如何处理则由专门的css规则决定。
- 因为<div />被设置了height属性，在ie中这就让它haslayout了，这就导致它一定要包含所有的内容，包括浮动块。而根据css标准，浮动块是无需被完全包含的，它就浮动在那里，除非遇到设置了clear属性的元素，否则后继内容只会侧移避让。
好了，相信这个对比足以说明问题的严重性了，通过ie的效果去理解css，最终只会让你的理解与真实的css相差甚远。详细的standards mode与quirks mode带来的标准执行差别，可以参考这篇文章：css quirks mode and strict mode。
然后肯定有人要问我，如果通过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》。看完这本书，相信你只会觉得自己缺乏布局的创造能力，而不会有布局却不知道如何实现。另外，如果你关注css方面的内容，可以考虑订阅我的blog：
- cat in chinese (feed: http://feeds.feedburner.com/catchen/chinese)
- cat in dotnet (feed: http://feeds.feedburner.com/catchen/dotnet)
过年之后，我可能会写一些与asp.net+css有关的文章，因为现在asp.net+css的开发并不方便，即使用了asp.net 2.0 css friendly control adapters也如此，因此需要根据自己的实际情况定制配对的control adapter才能解决问题，这就是我接下来要研究的事情。