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试试等等。