淘宝的怿飞在“如何快速定位页面中复杂 CSS BUG 问题” 中总结了他解决css bug的步骤。
做前端开发这么长时间确实也遇到了不少 css BUG，今天有时间 ，把他们整理出来：
首先的感受是在实际开发当中，依据合理的语义化，恰当的文档流，按照标准化所生产出来的页面，在几大主流浏览器标准的渲染下，一般是不需要有太多的hack来解决兼容性的问题。同样包括那非常有脾气的IE 6。
1.合理的语义化：所谓合理，很难定论， 但是在网上看到一个哥们的理解 ，我感觉比较有意思，如下：
2.恰当的文档流：我们回过头重新来看一下浏览器的渲染，每本介绍CSS的书中，都会提到文档流。sorry，我没有找到w3c上面最原始的出处，但是有找到CSS中三种最基本的定位机制：普通流(normal flow)、浮动(float)、绝对定位。我们可以参考这篇文章：http://www.w3.org/TR/CSS2/visuren.html。正确理解了上面这些之后，就不会出现“凡事都让所有的元素给float起来，定位就正确了”的恶习。
3.layout：ie下一切万恶的根源都归结到layout上面去。请反复的去看这个概念。
步骤
A.预查：
1.核查是否引入了正确的css。用firebug很容易就可以查到。
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结构（或者更符合语义的），往往就不会有兼容性的问题了。
D.如果问题还存在
跟头请假回家去睡觉吧~~~等你一觉醒来，可能想到是什么错误了 ,有时候css很疯狂,你要比它还疯狂……
我很想找个实际开发中的例子给大家展示 ,不过公司的东西都上传到服务器了,我想大家在开发中肯定会实际遇到这个问题的!
