css bug问题处理方法

        最简单的一些css问题是由代码中的打字和语法错误造成的。 例如在声明末尾忘了加分号，或者在输入的时候输入错误。解决方法：选择一个包含语法突出显示和代码补全功能的css编译器。自己写代码的时候也多注意。

1、特殊性和分类次序的问题

       在将一个规则应用于一个元素时，如果发现没有效果，这是往往存在特殊性问题。

       例如把内容中所有段落的背景颜色设置为白色，但是希望intro段落为橙色的：

 .content p{
      background-color: white;
}
 .intro{
      background-color: orange;
}

 如果在浏览器中测试，会看到intro段落仍然为白色，为实现想要的结果，需要让intro段落的选择器更特殊，最好的方法在intro段落选择器的开头添加内容元素的class

 .content p{
         background-color: white;
  }
 .content .intro{
         background-color: orange;
 }

 2、外边距叠加问题

      外边距叠加会导致许多麻烦的css特性。以div元素内嵌套的一个段落 为例

<div id="mycontent">
    <p>我的边距为20px</p>
</div>
//div框设置了10像素，段落设置了20像素的外边距
#mycontent {
  margin: 10px;
  background-color: #DDDDDD;
}
#mycontent p {
  margin: 20px;
  background-color: #FFFF00;
}

 现在段落的20像素顶外边距和底外边距与div的10像素外边距叠加，形成了一个20像素的垂直外边距。出现这种情况是由于具有块级子元素的元素计算其高度的方式造成的。

解决方法：通过添加一个垂直边框或内边距，外边距就不再叠加，而且元素的高度就是它包含的子元素的顶部和底部外边距边缘之间的距离。

#mycontent {
  margin: 10px;
  padding: 1px;
  background-color: #DDDDDD;
}
#mycontent p {
  margin: 20px;
  background-color: #FFFF00;
}

3、3像素文本偏移bug

     在ie8一下，当文本与一个浮动元素相邻时，就会出现这个bug。

     解决方法：设置一个小的高度height:1%；margin-left:0;然后在浮动元素上设置一个负3像素的右外边距。

 

4、捕捉bug知识

     跟踪bug的第一步是检测你的html和css，检查打字或语法错误。然后通过浏览器开发人员工具检查，了解页面，查看属性是否起到作用。

    在开发中使用更符合标准的浏览器（firefox）作为主要的开发浏览器。记住，不要把浏览器测试留到项目快结束时。应该采用连续测试方法，在项目开发中用所有浏览器检查页面。这样就不会在页面结束是突然发现许多问题。

5、尽量一开始就避免bug

    消除bug的最好办法就是从一开始就避免bug。很多bug都是由过分复杂的html或css造成的。应于最少的代码实现所需的结果。

6、隔离问题

    一旦确信出现了bug，就需要尽力隔离问题。通过隔离问题和识别症状，有可能查明问题的原因并修复它。隔离的一种方法是在相关的元素上使用边框和轮廓，看看它们的反应，如果一个边框就修复问题，那么就是边距叠加问题。

     尝试一些常见的解决方法，例如，将position属性设置为relaticve、将display属性设置为inline（在浮动元素上）或者设置宽高等尺寸，就能修复ie的许多bug。

7、创建基本测试案例

      基本测试案例就是重现bug所需的最少量的html和css。通过创建基本的测试案例，可以去掉一些“变量”， 使问题简单化。

      创建基本测试案例，复制出问题文件，然后删除多余的代码，开始注释掉或删除代码块。如果bug消失了，那么就找到了问题代码，然后解决问题。

8、修复问题，不是修复症状

     知道问题的根源，对于实现正确的解决方案是很有利的。最容易的解决方法就是回避这个问题。比如;如果是外边距的问题，我们就用内边距来来代替；如果是html的组合问题，那就考虑换一种组合。

     如果发现问题无法回避，那就只能解决这个问题。如果还解决不了那就寻求帮助，可以借助活跃的论坛。