页面中css调试和问题解决的一些经验总结

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

?

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

?1.浏览器的本身对CSS支持BUG:
?IE6有一堆BUG,具体可以参考一下《IE6 BUG大全》https://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) https://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分钟呢可以找到问题所在的那一行或者几行代码,这个方法要确保你的编辑器能任意的撤销,还原。(转载请注明出处:https://www.css88.com)

?

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

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 页面中css调试和问题解决的一些经验总结

评论 13

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏