原文地址：http://www.cnblogs.com/svage/archive/2011/02/12/1952704.html
项目最新版本的开发进入后期阶段，今天鼓起勇气打开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 却有例外：
<strong>The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, </strong> |
<strong>and table-caption elements is undefined. |
</strong> |
分析 ：经测试，在浏览器（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
分析 ：代码结构如下
<div>
<img src="filename" alt="图片" />
</div>
解决方法 ：把代码结构改成如下：
<div><img src="filename" alt="图片" /></div>
并设置img元素的display:block（img元素默认是一个display:inline的元素）
9、IE6 7下的浮动元素的父元素在拖动滚动条时出现的边框缺失bug
解决方法 ：设置zoom，使元素获得布局。
10、 IE（6 7 8） 的 z-index bug
分析 ：看代码
xhtml:< div id ="container" >
< div id ="box1" > 这个box应该在上面 </ div >
</ div >
< div id ="box2" >
这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking
context ，甚至当元素 z-index的为“auto”。
</ div >css:container { position: relative; }
#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的一些资料
12、IE6下的重复字符bug
分析： 如下图所示
出现这个BUG的“机遇“其实并不大，要满足以下一个或者多个条件：
1.父元素的内部有多个浮动 元素。
2. 最后一个浮动元素前有隐藏元素：包括html注释 和display：none 的元素
3.子元素的宽度和父元素相同，父元素的宽度减去子元素宽度小于3px
最终得出的结论是：溢出文字的字数=注释的条数 *2-1
这个变态BUG的最早文献是出现在2004年，这里可见 。
解决方法：
1.把浮动的子元素加上display:inline;属性（推荐）
2.去掉注释和所有隐藏元素（缺点：特殊情况下不一定可以删除）
3. 把浮动的子元素加上margin-right:-3px;属性（缺点：要加IE6的hack，也算是好方法）
4.在隐藏的DIV外嵌套一个DIV（缺点：增加的结果复杂性）
详解：http://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html
13、IE6下的空div bug
分析： 通常在实现可拓展的圆角框时，习惯在头尾使用两个空元素来放置背景图片如<div class="hd"></div>，但是这个空元素在IE6下会莫名的产生一个高度，为原先定义的2倍。代码如下：
1 | < div class = "hd" ></ div >< br >< div class = "bd" >content</ div >< br >< div class = "ft" ></ div >< br >样式：< br > .hd{background:url("filename") transparent ...; height:5px;}< br > |
解决方法： 为这个空元素设定line-height:0;font-size:1px;即可解决这个bug。
14、IE6下对position：fixed不支持的bug
分析：问题的原因是IE6下的fixed元素绝对定位位置是针对html元素的，而滚动条则是针对body元素的
解决方法：
body{background-image:("xx.gif");}/*一张不存在的图片*/
.fixed{_postion:absolute;expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight))}//底部
expression(eval(document.documentElement.scrollTop));/*头部*/
expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop-80));/*右侧*/
15、IE6下input/textarea/select元素继承父元素的水平margin的bug
分析：http://haslayout.net/css/Form-Control-Double-Margin-Bug
解决方法：这个bug在开发中是经常遇到的，解决方法就是在input或者textarea元素上使用负的margin，使元素重新布局。
16、IE6不支持min-height/max-height/min-width/max-width的bug
分析：无
解决方法：根据IE6的特性模拟出来
height:auto!important;
min-height: x px; /* 需要的最小高度 */
height: x px
17、IE6下position：relative的bug
分析：在IE6下父层（或者上层）设置为position:relative且没有写宽度,而这个元素又被一个带有滚动条overflow：auto/scroll属性包含的时候，它将会表现出absulute，并且在鼠标移上去时，会在整个屏幕上滑动；
解决方法：找到了bug的原因后，事情就变得简单了，方法有两种
1、把父层（或者更上层）的relative删掉，但有时候这个relative是必须的，那就只能用第二种方法了；
2、不删除relative，但给这个元素设定一个宽度，可以是100%。
18、IE6下样式不表现
分析：通常一个页面需要载入2-3个样式文件，但其中有某个样式文件里的样式完全不表现，你或许怀疑这个文件没有被加载，这个时候打开IE Debug看文件的传输情况，很清晰的看到文件正常加载了，纳闷吧！后来找到了
原因，主要有两个：
1、这个文件的编码和页面定义的character编码不一致；
2、不正确的注释（这个也有可能是页面编码不正确，而注释是中文导致的）
解决方法：检查页面编码；去掉注释；
19、IE6浮动元素与非浮动元素间隔的3pxbug
分析：在IE下，一个浮动元素与一个非浮动元素相邻时候，中间会莫名的出现一个3px的间隔。
解决方法：1、由于明确知道是3px，所以可以使用负的margin，但是由于IE下不同的盒模式，又会导致宽度上的不同，浮动元素的宽度如果超出了父元素的宽度在IE下是会有bug的，所以不建议使用这种方法。
2、不让浮动元素和非浮动元素相邻，或者把非浮动元素也设置为浮动元素。
20、IE6下img元素底部出现5px的空白间隙bug
分析：
代码结构如下：
< li >< a href ="#" >< img src ="xxx.png" alt ="xxx" /></ a ></ li >
在ie6下会出现5px的空白。
解决方法：
1、
ul li { display : block ; font-size : 0 ; }
img { vertical-align : bottom ; }
2、img { _margin-bottom : -5px ; }
21、IE下透明度无效bug
分析：在IE的所有版本中，父元素设置了透明度，而子元素如果有position：relative/absolute时，子元素无法继承父元素的透明度。
找了一些资料：http://younglab.blog.51cto.com/416652/431363
解决方法：除了资料中使用的方法（触发layout），还有个土方法，那就是在透明度比较小的区域中，使用具有透明度的图片和字体模糊。
22、IE下overflow：auto/scroll不起作用的bug
分析：在IE下overflow不起作用，但是在火狐下是正常显示的，IE下overflow如同虚设，内容是表现出来了，但是确实在区域的下面显示，滚动条也无法使用。
解决方法：对设置了overflow的元素设定高度和宽度（一般使用滚动条的都会设置这些属性），然后给这个元素进行position定位 ，relative或者absolute都是可以的
23、IE6 7 8下元素重叠bug
分析：页面操作过程中对一组li元素做remove（）或者hide（）时，被移除的li的下一个兄弟元素会往下偏移，从而发生元素重叠。
解决方法：js中对这个li元素的父元素加上toggleClass("ie-hack");//ie-hack为不存在的class。
原因不明。
24、IE6/7/8下直接对input输入框使用背景图片，当输入值冲出背景图片宽度时，背景图片会随字符滑动
解决方法：在input框外加一个div，在这个div上设置背景
25、去掉a链接难看外框的方法：
IE下设置hideFocus=true,其他浏览器设置：outline:none
即
<a href="..." hideFocus="true" title=".."/>
a {
outline : none
}
还有一种是用expression的方法，但是耗性能，原因是每秒钟执行了很多次。不推荐是用
a{
blr:expression(this.onFocus=this.blue())
}
未完待续。。
扫一扫
6796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
