博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
IE6中常见BUG与相应的解决办法
阅读量:4610 次
发布时间:2019-06-09

本文共 1328 字,大约阅读时间需要 4 分钟。

开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,本文主要讲解一些比较容易遇到的IE6BUG,以及解决的办法。

一、IE6双倍边距bug

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

二、IE6中3像素问题及解决办法

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

三、IE6中奇数宽高的BUG

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

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

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

五、IE6下空元素的高度BUG

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

解决的方法有四种:

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

2.在元素中插入html注释:<!– >

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

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

六、重复文字的BUG

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

解决方法如下:

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

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

3.为浮动元素的最后一个条目加上条件注释,<!–[if !IE]>xxx<![endif]–>

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

七、IE6中 z-index失效

具体BUG为,元素的父级元素设置的z-index为1,那么其子级元素再设置z-index时会失效,其层级会继承父级元素的设置,造成某些层级调整上的BUG。

结语:实际上IE6中,很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住,一旦使用了float浮动,就为元素增加一个display:inline样式,可以有效的避免浮动造成的样式错乱问题。使用空DIV时,为了避免其高度影响布局美观,也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。

转载于:https://www.cnblogs.com/liyuspace/p/7710485.html

你可能感兴趣的文章
[告知]在评论中发布广告者必删!
查看>>
判断一个js对象是不是数组
查看>>
Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
查看>>
c# 实现电脑系统音量的增加,减少,静音等。
查看>>
Block那些事儿
查看>>
突然的感触,关乎技术上的
查看>>
再说单例模式的线程安全问题
查看>>
<<、>>、>>>移位操作
查看>>
HDU 3572 Task Schedule(拆点+最大流dinic)
查看>>
HDU——1405The Last Practice(试手map)
查看>>
PAT 基础编程题 4-11 求自定类型元素序列的中位数(希尔排序)
查看>>
PHP implode() 函数由数组合并字符串
查看>>
软件测试的生命周期&测试流程
查看>>
深入SpringMVC视图解析器
查看>>
hi~大家好,特地出来解释下最近为啥都不更新了!
查看>>
python linux 开启 一个新端口 查看文件
查看>>
ubuntu 常用命令
查看>>
Linux下命令行中的复制和粘贴
查看>>
mysql 使用的三个小技巧
查看>>
【2017-4-2】JS导航栏 选项卡
查看>>