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

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【分享：解决Css Bug问题的一些经验】，下面是详细的分享！

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

　　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工作更顺利，生活更加美好!

以上所分享的是关于分享：解决Css Bug问题的一些经验，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：css中display问题

　　答：display: block 是该元素的display默认值，如果该元素有可能被修改，就在这里进行重新声明回默认值，如果没有其它的地方会影响到这个元素的display属性，则不用声明。 >>详细

　　相关问题：css中margin各种bug怎么解决

　　答：这种情况可能有三个原因： ‍ ‍1.网页本身的问题,目前许多网站都是用的免费共享型模板，一般这样的模板都存在不通用，原模板的所有js(javascript)脚本可能又没有被完全用到。加之设计者的水平或是疏忽等问题。导致在页面上找不到js对... >>详细

　　相关问题：CSS页面一个问题，有经验人帮个忙

　　答：什么浏览器？真正的html代码是什么？相关的CSS是什么？ 有可能是IE6的躲猫猫bug，但是这种结构觉得不可能。 去除页面的其他html标签，把问题独立出来，单独调试。 >>详细