精通css（9）bug和修复bug

浏览器bug和不一致的显示方式是大多数CSS开发人员面临的主要问题。本文就bug问题作一些学习。

1.bug来源于自己

如果你写的布局跟你想象的不太一致，不要以为这是浏览器bug，首先应该想象是不是自己的问题。要么手贱忘了写";"或者把单词拼错了，要么是自己对css理解还不够。

2.IE中的bug

IE上的bug无疑是众多浏览器中最多的，这主要是它的显示引擎使用了layout（布局）。这是许多IE/Win显示bug的根源，所以理解layout概念还是很重要的。

2.1何为layout

layout是IE特有的，并非CSS的属性。IE使用layout来控制元素的尺寸和定位。那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素don't have layout，它的尺寸和位置就由最近的have layout的祖先元素控制。

默认情况下have layout的元素有body,html(标准模式中),table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marquee。可以使用JS的hasLayout函数来查看一个元素是否have layout。

另外，设置以下css属性会使元素have layout：

float:left/right;

display:inline-block;

width/height/zoom:任何值;

IE7中，以下属性也可以触发布局：

max-width:除none以外;

min-width:任何值;

overflow:hidden,scroll,auto;

2.2 layout带来的问题

1.IE6以下，如果段落have layout，那么就会限制为矩形，阻止了文本围绕浮动元素；

2.have layout的元素，如果子元素内容比自己还大，该元素会自动扩张，其width属性更像是min-width属性；

3.have layout的元素不会收缩；

4.对浮动元素自动清理；

5.相对定位元素don't have layout；

6,have layout的元素之间外边距不会叠加！呵呵；

7.在don't have layout的块级链接上单击，只会覆盖文本区域；

8.在滚动时，列表项上的背景图像间歇性的显示或消失.

许多IE的bug都可以通过触发layout来修复，IE7对layout的一些bug进行了修复，但还是使用layout显示引擎。直到IE8，才使用全新的显示引擎。

2.3修复bug

你可以使用条件注释，使用hack，使用过滤器，但这都是不到万不得已的情况下不会使用的方法。

2.3.1双外边距浮动bug

2.3.2 3像素文本偏移bug
2.3.3 IE6重复字符bug
2.3.4 IE6”藏猫猫“bug
2.3.5相对容器中的绝对定位

这里有更多bug： http://blog.csdn.net/dyllove98/article/details/8973494

相信随着wb技术的发展，IE的进化终将让我们遗忘这些特有的Bug。