我这样来解决CSS的Bug

做项目多了。慢慢体会到的是：依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般是不需要有太多的hack来解决兼容性的问题。同样也包括不那么特别标准的IE 6。

1.合理的语义化：合理使用tag标记。大家对于语义的理解都不一样，除了那些显而易见可以更合理的标签外，完全没有必要一定争论出一个高下，而且也很难有一个结果。然后就是注意最基础的，block和inline元素的嵌套顺序。

2.恰当的文档流：我们回过头重新来看一下浏览器的渲染，每本介绍CSS的书中，都会提到文档流。sorry，我没有找到w3c上面最原始的出处，但是有找到CSS中三种最基本的定位机制：普通流(normal flow)、浮动(float)、绝对定位。我们可以参考这篇文章：http://www.w3.org/TR/CSS2/visuren.html。正确理解了上面这些之后，就不会出现“凡事都让所有的元素给float起来，定位就正确了”的恶习。

3.haslayout：ie下一切万恶的根源都归结到layout上面去。请反复的去看这个概念。

步骤

A.预查：

1.核查是否引入了正确的css。用firebug很容易就可以查到。

2.html标签是否未闭合。用dreamweaver也很容易就可以确认，如果dreamweaver出问题，那么就只能手工来检查，或者考虑写一个脚本来进行标签匹配验证。

B.常见问题核查

1.检查是否需要清除浮动。

2.尝试将父容器加上overflow:hidden。

3.触发haslayout属性。注意：这里根据经验，可以尝试触发父容器及其中的子容器的haslayout属性。通常情况下，如果是因为layout的原因，在ff下会表现正常，ie下会出现错误。

4.如果和coding时预期的布局不一样，那么请重新反思代码结构。是不是盒模型的概念错了，文档流是否正确。分析问题所在的文档流（或者说定位机制），是否符合标准。可以通过设置不同颜色的background及border来辅助分析。这点的分析必须建立在对定位机制的反复理解上。

5.神秘的空隙。一般和line-height,font-size,vertical-align有关，或者删除原代码中的空格。

C.如果问题还存在

如果通过上述方法还未能解决css的bug问题，那就bug比较复杂了。需要：

1.精简不必要的HTML，逐段删除html，找到是因为哪段html的影响导致的，然后重复B步骤

2.同上，精简css。以上两端的原因是：有时候css的bug出问题的哪段代码未必是错误的，有可能是因为他附近的代码的影响。

3.同B4步骤，早期的时候遇到过很多问题，到最后回头再来看，却发现用合理的html结构（或者更符合语义的），往往就不会有兼容性的问题了。

我试图举例来说明，却发现很难找到现成的例子。但是就实践中的经验，通过上述方法，的确能解决很多的兼容性问题或者其它bug，希望有一点帮助。