在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题，css继承，css叠加等等，我们经常因为这些而需要调试页面中css。

以下只是我个人的一些经验总结，如果有不合适请留言斧正，欢迎补充。

一、为什么页面会出现种种的bug

1.浏览器的本身对CSS支持BUG：

IE6有一堆BUG；

FF需要注意清除浮动；

还有浏览器对css2各个属性的支持问题，大家需要了解浏览器对css2各个属性的支持情况；

2.直接书写错误，由于自己在写css时候的粗心造成的BUG

比如将 .ask-lable{width： 934px;height:94px; padding-top:43px; margin:0 auto;}

中的“{}”写成了中文状态的“{}”，或者溜掉了结束的“}”；margin:0 auto;中的冒号和封号，也会经常被写成中文的，还有0（零）经常会被写成o（英文字母o）；width： 934px;中的px经常会被忘掉，还有以下缩写的格式等等；

3.在页面编码不统一的情况下，经常会碰到，样式写着写着，在ie6下页面就乱掉了，这是IE6的bug；

4.没搞清楚html的块状元素和内联元素，css的某些属性对内联元素不起作用，

比如：《span style=“text-align:right;margin:30px; padding:30px; border：#F00 2px solid”》span是内联元素《/span》；

比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。

5.css继承，css叠加也可能造成一些bug，这里要特别注意一下重置样式（css reset）中和公用样式（public）的继承。

二、开始调试

1.找一个合适的调试工具，比如FireFox Web Developer， DOM Inspector，遨游的PageView， Internet Explorer

Developer Toolbar， 还有Firebug等等，现在FireFox 的Firebug调试比较流行，他会把你所选择的DOM（标签）的相关样式都显示在右边，当然然其他工具也有这个这些功能。

 

 

2.确认问题所在的样式，主要可以看看第一部分说的为什么页面会出现种种的bug，修改并测试。

3.排出以上问题，如果还是找不到那里错了，那就用“平分法”删除样式；平分法就是一半一半的删除样式，直到页面达到你预想的那样位置，一半1分钟呢可以找到问题所在的那一行或者几行代码，这个方法要确保你的编辑器能任意的撤销，还原。

三、解决问题

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

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

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

以上纯属个人观点，如有雷同实属巧合。

评论 (0) All

登陆 还没注册？