CSS错误排查方法

CSS错误排查方法

在网页设计时,出现CSS BUG往往是有迹可循的,就像是很多程序源代码出现bug后,我们通过技术分析,通过原先的注释文件,往往能够找到出现bug的原因,其实我们在编写网页设计时,要遵循很好的设计习惯,比如代码语义化,模块化,代码书写规范化,当然更要符合WEB标准,这样就能够帮助自己避免很多bug问题,就算是有,那么通过注释和一目了然的代码语义,就很容易找到问题出现在哪里了!

CSS错误排查方法

一、拼写是否正确

可以使用W3C的校验,或者网页编辑软件的校验功能,来检查(X)HTML文档内的标签是否配套、嵌套顺序是否正确、空标签是否闭合,CSS拼写是否正确。不正确的嵌套、错误的拼写是非常常见的错误。

比如将 .ask-lable{width: 934px;height:94px; padding-top:43px; margin:0 auto;}中的“{}”写成了中文状态的“{}”,或者溜掉了结束的“}”;margin:0 auto;中的冒号和封号,也会经常被写成中文的,还有0(零)经常会被写成o(英文字母o);width: 934px;中的px经常会被忘掉,还有以下缩写的格式等等;

提示

1、现在有很多编辑软件都可以提供(X)HTML和CSS的校验功能,包括浏览器对CSS属性是否支持等。例如:Dreamweaver 8以上版本,TopStyle等软件。

2、Firefox中的附加软件“Firebug”是一个非常好用的工具,它不仅可以检查(X)HTML、CSS和JavaScript是否正确,还可以动态显示页面内元素的框和位置,是调试网页很好的辅助插件。每个流行的浏览器按住F12都含有调试CSS的插件。

二、检查代码单词有没有错误?html标签是否闭合?

我们在进行网页设计的时候,html语言规范是首尾要闭合,如果仅仅写一个头< head >,那么末尾就应该有< /head >这样代码来完成整改网页头部的设计!可是很多设计师因为粗心大意,往往只写了一个头部,却忽略了闭合,导致CSS BUG的出现!当然这是在记事本下编写网页会出现的,现在只要使用一些专业的网页设计软件,比如frontpage,dreamweaver等等,代码的部分会通过颜色的提醒,不过对于某些设计师来说,第一次容易粗心大意,经过二次检查往往会能够避免,当然,更多的网页设计师在设计网页的时候,将css代码的单词少写了一个字母!所以这往往是导致出现CSS BUG问题的重要原因!

三、样式排除法


有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。


对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。


四、模块确认法


有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。
 

五、清除容器浮动

还有就是在设计CSS时,不小心把容器属性设置成了浮动,很容易造成页面错位,网页由此变得十分混乱,可能乍一看,无从下手,其实这往往就是容器设置了浮动,如果对每个容器挨个寻找比较麻烦,如果使用下面一段代码,就很容易把容器的浮动属性给关闭掉!

六、检查是否有合适的DTD

不同的DOCTYPE直接影响浏览器对于(X)HTML和CSS的解释。

七、检查CSS属性浏览器是否支持

虽然现代浏览器支持绝大部分的CSS 2.1规范和部分的CSS 3规范,但是在前面的章节也介绍过,有一些CSS属性还没有被浏览器广泛支持,因此在某个属性没有生效的时候,请确定浏览器是否支持。

八、 隔离问题

1、将有问题的地方突出出来,例如给元素加一个醒目的边框或者背景颜色。

2、如果增加了边框就可以解决问题,那么就是边距重叠的问题。

3、如果增加了背景,但是背景不显示,那么有可能是特殊性或者浮动元素没有闭合。

4、尝试修改一些属性,特别是会触发IE的hasLayout的属性,判断是否是IE常见的Bug。



九、建立基本测试

1、如果还不能解决问题,则可以复制问题文件,然后删除多余的(X)HTML,只留下有问题的部分。

2、删除(X)HTML内的注释问题,看问题是否会消失。

3、删除元素间的空格,看问题是否会消失。

4、然后分块注释掉样式表,直到问题消失,则刚注释掉的样式即为问题所在。

十、寻求其他方式

1.学会用google,百度。ie6的大多数bug,firefox的清除浮动,都可以在网上找到,同时要靠自己积累经验。

2.问问题,到群里,论坛里问问题要注意方式方法;首先要表达清楚你的问题所在,能表达问题的做好方法是用简单的demo,告诉人家什么浏览器,什么样情况下会出错,做好把demo直接放到论坛,或者代码盒子,让人家最直接的看到你的问题,群里不要贴10行以上的代码,大家每天再看这些东西,你贴一堆,如果不是他空的无聊,我保证没人会看你的代码。不要只要答案!人家可能不会给你答案,只给你一些建议,一些提醒,或几个关键字,根据建议,提醒,关键字去google,百度搜索一下。比如:人家说这可能是清除浮动的问题,可能你从来没听说过清除浮动这个词,那就别问了,马上去google,百度搜索清除浮动。看看是不是这个问题,如果不是,告诉人家不是这个问题。不管有没有解决问题,跟人家说声谢谢,至少要心存感激。

3.回避问题,不是任何问题你都可以找到答案的,但是却可以找到解决方法。不是任何问题你都可以找到解决方法,但是却可以避免这些问题,比如,上下容器margin-bottom和 margin-top重叠问题,其实这些问题可以回避,你把下一个浏览器的margin-top改成padding-top试试等等。

标签: