IE6兼容性大全(终极版)二

IE6兼容性大全(终极版)二

接上文 IE6兼容性大全(终极版)一

4.IE6里的列表问题

4.1 横向列表宽度bug

如果你使用float:left;[/i]把[i]<li>[/i]横向摆列,并且[i]<li>[/i]内包含的[i]<a>[/i](或其他)触发了hasLayout,在IE6下就会有错误的表现.
解决方法很简单,只需要给[i]<a>[/i]定义同样的[i]float:left;即可。

4.2 列表阶梯bug

列表阶梯bug通常会在给<li>[/i]的子元素[i]<a>[/i]使用[i]float:left;时触发,我们本意是要做一个横向的列表(通常是导航栏),但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给<li>[/i]定义[i]float:left;[/i]而非子元素[i]<a>[/i],或者给[i]<li>[/i]定义[i]display:inline;也可以解决。

4.3 垂直列表间隙bug

当我们使用<li>包含一个块级子元素时,IE6(IE7也有可能)会错误地给每条列表元素(<li>)之间添加空隙;解决这个问题的方法有很多.把<a>flaot并且清除float来解决这个问题。

5.IE6的千年老大难——IE6的布局问题

5.1 理解 hasLayout

许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout[/i]。简要的说,在给元素定义具体的尺寸(如[i]height[/i]或[i]width[/i])就会触发[i]hasLayout,在IE6下缺失或触发hasLayout会导致一些bug。

5.2 IE6 盒模型

如果怪异模式(quirks mode)在IE6中启用,IE6将会使用微软旧版的盒模型:width是元素的实际宽度,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式,或者避免给有border[/i]或[i]padding[/i]的元素定义[i]width属性。当然你也可以考虑使用条件注释。

5.3 最小高度

IE6 不支持min-height[/i]属性,但它却认为[i]height[/i]就是最小高度。解决的方法也很多,我们一般使用ie6不支持但其余浏览器支持的属性[i]!important。当然,我们还可以使用CSS 选择器。需要注意的是,下面代码中各个属性的顺序不能写错。

/* 所有浏览器 */  #container {min-height:200px; height:auto !important; height:200px;}

5.4 最大高度

非常遗憾,在IE6下实现max-height只能使用IE特有滤镜,或者可以使用JavaScript实现。我个人更建议使用JavaScript来解决,因为IE滤镜会消耗大量资源甚至会使浏览器崩溃,而且禁用JavaScript后这两种方法都无法生效。

var container = document.getElementById('container'); 

container.style.height = (container.scrollHeight > 199) ? "200px" : "auto"; 

function setMaxHeight(elementId, height){ 

    var container = document.getElementById(elementId); 

    container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto"; 

setMaxHeight('container1', 200); 

setMaxHeight('container2', 500);

看过本文的读者还看过:

IE6兼容性大全(终极版)三

IE6兼容性大全(终极版)一