技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> IE兼容性bug汇总

IE兼容性bug汇总

浏览:2407次  出处信息

    项目最新版本的开发进入后期阶段,今天鼓起勇气打开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 却有例外:

    

1

    

<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>
1

    

<strong>and table-caption elements
1

    

is
1

    

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

    分析:代码结构如下

    

    ”图片”

    

    解决方法:把代码结构改成如下:

    

”图片”

    并设置img元素的display:block(img元素默认是一个display:inline的元素)

    9、IE6 7下的浮动元素的父元素在拖动滚动条时出现的边框缺失bug

    解决方法:设置zoom,使元素获得布局。

    10、 IE(6 7 8) 的 z-index bug

    分析:看代码

xhtml:

    

这个box应该在上面

    

    

     这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking

     context ,甚至当元素 z-index的为“auto”。

    

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的一些资料

  • IE8
  • 建议继续学习:

    1. 关于对浏览器兼容性的一点点理解    (阅读:2429)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1