页面中css调试和问题解决的一些经验总结 – WEB前端开发

在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题，css继承，css叠加等等，我们经常因为这些而需要调试页面中css。
以下只是我个人的一些经验总结，如果有不合适请留言斧正，欢迎补充。

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

 1.浏览器的本身对CSS支持BUG：
 IE6有一堆BUG，具体可以参考一下 《IE6 BUG大全》http://www.css88.com/archives/579 ；
 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的某些属性对内联元素不起作用 ，

可以参阅：html中的块元素(block element)和内联元素(inline element) http://www.css88.com/archives/646

比如：<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分钟呢可以找到问题所在的那一行或者几行代码，这个方法要确保你的编辑器能任意的撤销，还原。 (转载请注明出处： http://www.css88.com )

三、解决问题
 1.学会用google，百度。 ie6的大多数bug，firefox的清除浮动，都可以在网上找到，同时要靠自己积累经验。
  2.问问题， 到群里，论坛里问问题要注意方式方法；首先要表达清楚你的问题所在，能表达问题的做好方法是用简单的demo，告诉人家什么浏览器，什么样情况下会出错，做好把demo直接放到论坛，或者代码盒子，让人家最直接的看到你的问题，群里不要贴10行以上的代码，大家每天再看这些东西，你贴一堆，如果不是他空的无聊，我保证没人会看你的代码。不要只要答案！人家可能不会给你答案，只给你一些建议，一些提醒，或几个关键字，根据建议，提醒，关键字去google，百度搜索一下。比如：人家说这可能是清除浮动的问题，可能你从来没听说过清除浮动这个词，那就别问了，马上去google，百度搜索清除浮动。看看是不是这个问题，如果不是，告诉人家不是这个问题。不管有没有解决问题，跟人家说声谢谢，至少要心存感激。
 3.回避问题， 不是任何问题你都可以找到答案的，但是却可以找到解决方法。不是任何问题你都可以找到解决方法，但是却可以避免这些问题，比如，上下容器margin-bottom和margin-top重叠问题，其实这些问题可以回避，你把下一个浏览器的margin-top改成padding-top试试等等。

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