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

knight_black_bob

浏览: 860345 次
性别:
来自: 北京

最近访客更多访客>>

bian1024

lli

cqh520llr

hxgdragon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css 前端

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

1、IE6双倍边距bug

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

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

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

3、IE6中奇数宽高的BUG

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

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

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

5、IE6下空元素的高度BUG

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

解决的方法有四种:

(1) 在元素的css中加入：overflow:hidden

(2) 在元素中插入html注释：<!– >

(3) 在元素中插入html的空白符： 

(4) 在元素的css中加入：font-size:0

6、重复文字的BUG

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

解决方法如下：

(1) 确保元素都带有display:inline

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

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

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

7、IE6中 z-index失效

具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因，以及解决办法http://www.frontopen.com/199.html

(1) z-index无论设置多高都不起作用情况。

条件：1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

解决：1、position:relative改为position:absolute；

2、去除浮动；

3、浮动元素添加position属性（如relative，absolute等）

(2) 父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。（IE7与IE6有着同样的bug）

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

8、单行文字的高度问题

Windows 7

Firefox、Opera、Google浏览器等，“12px”的字以12px的高居中（上下各有4象素的距离）

而IE内核类浏览器（遨游、360、TT、IE6、IE7、IE8）却“统一”的呈现“35”状况。以12px的字高，在20px的行高里居中偏上一个象素，即上3px、下5px的！

Windows XP

Firefox、Opera、Google浏览器等：字高11px，上4px，下5px

IE内核（遨游、360、TT、IE6、IE7、IE8）：字高11px，上3px，下6px

以非IE内核的浏览结果为准

.line12 {

line-height: 20px;

line-height: 22px9;

_overflow: hidden;

height: 20px;

font-size: 12px;

border: 1px solid #000;

}

</style>

IE内核类的为准

.line12 {

line-height: 20px;

line-height: 22px9;

_overflow: hidden;

height: 20px;

font-size: 12px;

border: 1px solid #000;

}

</style>

总结：以非IE类的为准，优点是上下居中，这在单行图文时最佳，虽然多了行样式－－但值得。致命点是：”overflow: hidden;“，如果你在容器（DIV）里有其他绝对定位的层时，别用！相反以IE类为准的，即没有这个问题。遗憾的是：总是差那么象素。如果想要完美，只能用其他的手段（padding、margin）解决了！

认识hasLayout——IE浏览器css bug的一大罪恶根源

什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

下列元素默认 hasLayout=true

很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。

hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。

————————————-

display

启动haslayout的值:inline-block

取消hasLayout的值:其他值

————————————–

width/height

启动hasLayout的值：除了auto以外的值

取消hasLayout的值：auto

—————————————

position

启动hasLayout的值：absolute

取消hasLayout的值：static

—————————————-

float

启动hasLayout的值：left或right

取消hasLayout的值：none

—————————————

zoom

启动hasLayout的值：有值

取消hasLayout的值：narmal或者空值

（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5 对这个属性不支持。）

—————————————-

writing-mode: tb-rl

这也是微软专有的属性。

ie7还有一些额外的属性可以触发该属性（不完全列表）：

min-height: (任何值)

max-height: (任何值除了none)

min-width: (任何值)

max-width: (任何值除了none)

overflow: (任何值除了visible)

overflow-x: (任何值除了visible)

overflow-y: (任何值除了visible)5

position: fixed

要注意的是，hasLayout是微软专有的东西，对firefox等比较遵守标准的浏览器就无效了，因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果，不知ie8是否已经弃用这个属性了？

其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。

一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack