聪少Harry笔记前端开发,每日一课互联网科技

IE6中那些让前端开发头疼的bug及解决方案

2016-02-22  本文已影响134人  8fda73aa8a1f

前端开发的同学们一定都对IE6深恶痛绝,因为它是bug最多的浏览器,今天我就来跟大家讲讲那些让人头疼的bug以及如何消灭它们。

一、双边距

这个bug出现的场景是,当页面上的元素使用float浮动时,不管是向左还是向右浮动;只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px。想要解决这个BUG就需要在该元素的css中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG。

二、三像素

当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部,当设定高度后又跑到容器的相反侧了。要解决这类BUG的话,需要使布局在同一行的元素都加上float浮动。

三、奇数宽高

IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中主要问题是出在奇数高宽上。要解决此类问题,只需要尽量将外部定位的div高宽写成偶数即可。

四、图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙,尤其在图片垂直挨着图片的时候,即可看到这样的间隙。要解决此类问题,需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0。

五、偶尔出现最后一行文字重复

在某些比较复杂的排版中,有时候浮动元素的最后一些字符会出现在clear清除元素的下面。

解决方法如下:

1.确保元素都带有display:inline

2.在最后一个元素上使用“margin-right:-3px

3.为浮动元素的最后一个条目加上条件注释,xxx

4.在容器的最后元素使用一个空白的div,为这个div指定不超过容器的宽度。

六、png图片不透明

前端的同学应该都是知道的,IE6不支持png的图片,png的图片,只要是透明的,在IE6中就会显示为灰色。这个问题有两个解决方案,一是将png的图片改为gif格式或者png8的;第二中方式是用滤镜去解决;还有一种方式就是用js去解决,给png图片定义样式,但是这个方式只对img有效,背景图片无效。

七、z-index失效

具体BUG为,元素的父级元素设置的z-index为1,那么其子级元素再设置z-index时会失效,其层级会继承父级元素的设置,造成某些层级调整上的BUG。其实这个问题出现的原因比较多,大家可以就这个问题去搜索一下,篇幅较大,这里就不挨个列举了。

八、IE6下空元素的高度BUG

如果一个元素中没有任何内容,当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。

解决的方法有四种:

1.在元素的css中加入:overflow:hidden

2.在元素中插入html注释:

3.在元素中插入html的空白符:

4.在元素的css中加入:font-size:0

欢迎关注鄙人个人微信公众号:xuebing_wxb

Hi,我是年轻大叔

罗辑思维前端开发工程师

热爱互联网技术,更愿意跟大家分享我的经验与心得

上一篇 下一篇

猜你喜欢

热点阅读