快速业务通道

分享:解决Css Bug问题的一些经验

作者 佚名 来源 网络推广 浏览 发布时间 2012-02-12

  css bug问题是一个做前端的朋友都会遇到的问题,特别是对刚刚学习网页设计,做网页切片的时候是经常遇到的问题。当我们刚遇到问题的时候可能有时候会措手不及,有时候解决了一整天也解决不了,很是烦恼。当然要解决css bug问题是有一定方法可循的,比如说我们可以先找到问题的根源在哪里。下面就介绍一下找到问题根源的一些好方法。有些是我个人总结的,有些是网上查找的,希望能方便大家解决css bug。首先养成良好的书写习惯,代码语意化,模块化,符合web标准。可以减少很多bug,可以为我们减少很多不必要的麻烦。我们的代码将更出色优雅。

  检查一下html标签是否闭合,单词拼写是否出错

  这一条可不可小觑啊,有时候折腾了你一天的问题可能就是在这里。而且这种错误对于新手来说可能会比较常有,对于做了一段时间的前端朋友可能也会有这问题。所以写代码时要认真才行。我平时都是用Dreamweaver写代码的,所以这有个快捷方式:一般没有闭合的标签,会有黄色背景高亮。检查css拼写是否出错呢,Dreamweaver也有个功能,就是当你开了代码提示的时候,写错css代码的话,他是不会出现代码提示的。

  排除法

  当我们新建了比较多的css文件的时候,需要用到排除法,逐个的去排除CSS文件,从而找到bug相对应的文件,缩小范围。这方法是比较常用的。

  背景边框调试法

  所谓的背景边框调试法,就是把元素的边框或背景设置成显眼的颜色,可以让你很好的区分开页面结构布局,从而进行调试。可以快速的定位bug的区域是来自哪一块。

  检查是否清除浮动

  有很多css问题是因为容器设置了浮动,造成页面出现错位。在页面上看上去是很恐怖的,因为跟自己想要的效果相差有时候会很大。但是不用紧张,这可能是因为没有清除浮动造成的。清除浮动的方法有很多。

  这方法比较多人推荐使用:

  .clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden; text-align:center}.clearfix{display:inline-block;}* html .clearfix{height:1%}.clearfix{display:block;}

  .clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden; text-align:center}

  .clearfix{display:inline-block;}

  * html .clearfix{height:1%}.clearfix{display:block;}

  我比较常使用的是clear:both当然还是推荐大家使用clearfix方法吧。

  检查ie下面的haslayout

  IE看到ie两个字就会想到IE6还有BUG,不知你们会不会?很多IE下复杂的BUG都跟haslayout有关联。远离bug工作更顺利,生活更加美好!

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号