代码改变世界

如何应对实际开发中的CSS bug

2009-03-26 20:57  一醉而过  阅读(404)  评论(0编辑  收藏  举报

淘宝的怿飞在“如何快速定位页面中复杂 CSS BUG 问题” 中总结了他解决css bug的步骤。

做前端开发这么长时间确实也遇到了不少 css BUG,今天有时间 ,把他们整理出来:

首先的感受是在实际开发当中,依据合理的语义化,恰当的文档流,按照标准化所生产出来的页面,在几大主流浏览器标准的渲染下,一般是不需要有太多的hack来解决兼容性的问题。同样包括那非常有脾气的IE 6。

1.合理的语义化:所谓合理,很难定论, 但是在网上看到一个哥们的理解 ,我感觉比较有意思,如下:

关于语义化的XHTML代码,我这样理解,每一个代码都是有他自己的意思,就好比我们的房子,就像一个网页的代码一样,本来是客厅的地方我们可以用来做卧室,做书房,甚至是厕所(只要你愿意)这些都是可以的,但我们一般来说是不会这样的,这就是因为在我们的脑子中明白客厅就是用来做客厅的,干嘛要用来做厕所,我也不需要那么大的厕所。语义化的代码应该也是同样的意思,本来是用来做数据表现的table被大伙用来做网页的结构表现而且还乐此不疲,客厅一般的的厕所用的很舒服,反正大家都是这样用:(。本来是用来做标题的H1为何大家都忘了,偏偏要用<div>标题</div>或者<span>标题</span>,这样的标签加上样式和<H1>加上样式的表现是没有什么区别,只是我们为什么要在很大空间里蹲坑很小的空间会客,反过来应该要好一些。这些都是结构上的一些区别,那对于语义化的表现呢?

 

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很疯狂,你要比它还疯狂......

我很想找个实际开发中的例子给大家展示 ,不过公司的东西都上传到服务器了,我想大家在开发中肯定会实际遇到这个问题的!