项目最新版本的开发进入后期阶段，今天鼓起勇气打开IE Test，如我所料啊！页面在IE6下面目全非了，呜呜~~
现在开始修复IE的Bug(大部分是IE6，IE7 8也有一些)，顺便记录下来。
1、png图片在IE6下出现透明或背景变灰的bug;
分析： 随处可见，遇到时就想好策略。
解决方法：1、使用滤镜，语法如下
.image-style { background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
}
注意：使用滤镜需要性能损耗。
2、给IE6单独制作一张.gif图片，打上hack
.image-style{ background:transparent url(“filename.png”) no-repeat scroll 0 0;
_background-image:url(“filename.gif”);
}
这种方法只需要在切图时多存储一份.gif格式的图片，一般采用这种方法。
2、position:absolute定位在IE6下存在left和bottom相对最外层视窗(body)定位的bug:
分析： 由于在IE6下，相对定位的元素没有获得IE内部的haslayout属性，因此不创建新的定位上下文，所以绝对定位的元素相对于视口进行定位。
解决方法：1、设置height：1%；//小的高度不会对实际高度找出影响
2、相对定位的祖先元素设置过高度和宽度。
3、相对定位的祖先元素设置_zoom:1,用于触发元素的layout属性。
3、IE6下border不显示的bug
分析：对一个div定义border，但是却不显示。
解决方法：定义宽度；定义高度；清除浮动。
4、在 W3C 规范中 position 是可以使用在任何元素上的，但table元素的 position:relative 却有例外：
|
|
分析：经测试，在浏览器(IE 除外)中给 table 定义 position:relative 属性是无效的。如果的确需要在表格中使用该属性，建议在单元格中嵌套一个 div 元素，再在其上设置 position:relative 属性来模拟。
5、IE6下overflow:hidden失效bug
分析：在开发中经常使用overflow:hidden来清除浮动，也就是在浮动元素的父元素中使用这个属性，就相当于添加了一个clear元素。但是，这在IE6下不给力。
解决方法：只要在父元素中给定一个宽度就可解决这个bug；
6、IE6下的双空白边浮动bug
分析：这是一个常见的出名BUG，给IE6下的浮动元素定义margin-left或者margin-right，实际上是数值的两倍。
解决方法：把这个浮动元素设置为display:inline;
7、IE6下float元素如果没有定义宽度，在浮动时它会自动占满一行的bug
分析：即使对这个浮动元素内部的元素设置了宽度，也是无效的
解决方法：一般用于布局的浮动元素不会要求横向可自由拓展的，那么可以通过设置宽度来解决这个bug.
8、IE6下img元素底部留白的bug
分析：代码结构如下
解决方法：把代码结构改成如下：
并设置img元素的display:block(img元素默认是一个display:inline的元素)
9、IE6 7下的浮动元素的父元素在拖动滚动条时出现的边框缺失bug
解决方法：设置zoom，使元素获得布局。
10、 IE(6 7 8) 的 z-index bug
分析：看代码
这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking
context ，甚至当元素 z-index的为“auto”。
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }
结果：ff/chrome显示为box1在box2上，而IE确实box2显示在了box1上
原因：IE浏览器会对定位的元素产生一个新的stacking context，并且从z-index:0开始
11、关于IE8的一些资料