IE6中的常见BUG与相应的解决办法

开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论。其文档的解析理解规范也引起了诸多恼人的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中部分情况下z-index无效的原因,以及解决办法

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

时间: 2024-11-05 14:59:14

IE6中的常见BUG与相应的解决办法的相关文章

[ 打败 IE 的葵花宝典 ] IE6中css常见BUG全集及解决方案

IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug. 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29.31的解决方

IIS中最常见5个问题的解决办法

问题1:未启用父路径 症状举例: Server.MapPath() 错误 ASP 0175 : 80004005 不允许的 Path 字符 /0709/dqyllhsub/news/OpenDatabase.asp,行 4 在 MapPath 的 Path 参数中不允许字符 ... 原因分析: 许多Web页面里要用到诸如../格式的语句(即回到上一层的页面,也就是父路径),而IIS6.0出于安全考虑,这一选项默认是关闭的. 解决方法: 在IIS中 属性->主目录->配置->选项中.把”启

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形

实战中总结出来的CSS常见问题及解决办法

一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次. 对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大. 三.一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来. 临时解

IE6不支持:hover伪类效果的解决办法

:hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器就显示不出来. 在IE6中只兼容a:hover,要使用li:hover或div:hover,需引用一个文件使其兼容: csshover.htc (点击直接查看) 放在网站的根目录下,并在css文件(或者<style>标签)中,加上 body { behavior:url("...cssh

c++中两个头文件定义同名类的解决办法

今天考虑了一个问题,如果两个头文件比如time.h times.h里面都定义了一个time的类,要怎么解决?vs编译器只对cpp文件进行编译,在编译阶段,这两个头文件的实现文件都不会出错,如果不在主函数中用到time这个类,程序也不会有问题.但是如果用到,那就是disaster!!!,如果你不得不在两个头文件中定义同名类,下面是我自己思考出来的最简单的解决方式--->>用不同的作用域包含 #ifndef TIME_H #define TIME_H namespace time1 { class

http中 get方法 传送中文参数乱码解决办法

http传送参数有两种方法:get 和post  当时使用get方法传递中文参数是会有乱码现象 解决办法: 1.在jsp压面url后面的参数使用 encodeURI:"&zxbghy="+ encodeURI(zxbghy) 2.在后台java获取参数时使用字节数组:temphgdmhy = new String(hgdmhy.getBytes("ISO-8859-1"), "UTF-8");  案例,用get方法传递两个中文参数:zxb

java.sql.SQLException: 索引中丢失 IN 或 OUT 参数:: 1解决办法

java.sql.SQLException: 索引中丢失  IN 或 OUT 参数:: 1 at oracle.jdbc.driver.DatabaseError.throwSqlException(DatabaseError.java:125) at oracle.jdbc.driver.DatabaseError.throwSqlException(DatabaseError.java:162) at oracle.jdbc.driver.OraclePreparedStatement.pr

未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法

错误消息: 未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法 解决办法: 1, 若要解决该问题,请在 Visual Studio 2010 命令提示符下运行下面的命令行: aspnet_regiis.exe -i -enable 如果出现以下错误的时候我们就用方法2.. PM> aspnet_regiis.exe -i -enable无法将“aspn