如何应对实际开发中的CSS bug
2009-03-26 20:57 一醉而过 阅读(438) 评论(0) 编辑 收藏 举报淘宝的怿飞在“如何快速定位页面中复杂 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很容易就可以查到。
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结构(或者更符合语义的),往往就不会有兼容性的问题了。
D.如果问题还存在
跟头请假回家去睡觉吧~~~等你一觉醒来,可能想到是什么错误了 ,有时候css很疯狂,你要比它还疯狂......
我很想找个实际开发中的例子给大家展示 ,不过公司的东西都上传到服务器了,我想大家在开发中肯定会实际遇到这个问题的!