IE6浮动引起的一些BUG

记事本 2010-08-13 09:50:06 浏览 3,044 次

标签 IE6 浮动

LI浮动之后换行

在一个没有设定宽度的浮动元素#floated里，有一个触发了hasLayout的子元素#content，并且#content没有设定宽度。那么#content和#floated会以100%的宽度呈现，占满这一行。例子：

（IE6的截图）

 
1
li { 

2
  float: left; 

3
  display: block; 

4
} 

5
li a { 

6
  display: block; 

7
  height: 30px; 

8
  margin-right: 10px; 

9
}

 
1
<ul> 

2
  <li><a href="#">HELLO WORLD</a></li> 

3
  <li><a href="#">HELLO WORLD</a></li> 

4
  <li><a href="#">HELLO WORLD</a></li> 

5
  <li><a href="#">HELLO WORLD</a></li> 

6
  <li><a href="#">HELLO WORLD</a></li> 

7
  <li><a href="#">HELLO WORLD</a></li> 

8
</ul>

在上面的例子中，a元素触发了hasLayout，但是没有设定宽度，在IE6里会产生换行。
解决办法有下面几种：

给a或者li明确的宽度。
让a元素也浮动。（可能会带来新的BUG）
去掉height，也就是不触发hasLayout。（可能会带来新的BUG）

LI中的浮动元素以阶梯的方式呈现

继续用上面的HTML做为例子，CSS变为：

1
ul { 

2
  list-style: none; 

3
} 

4
li a { 

5
  float: left; 

6
  height: 30px; 

7
  margin-right: 10px; 

8
}

（IE6的截图）

在标准浏览器下，如果有足够的宽度，例子中所有的a元素会构成一行。但是在IE6下面，a元素是以阶梯的方式呈现。解决的办法有下面几种：

给li加上display: inline;。
让li也浮动。

浮动元素文本换行

上图中的li没有设置宽度，当容器的宽度不够时，正常情况下应该是li下沉，另起一行。但是在IE6下面却是li里面的文本换行，导致混乱的布局。下面是产生BUG的CSS：

 
1
ul { 

2
  list-style: none; 

3
} 

4
li { 

5
  float: left; 

6
} 

7
li a { 

8
  margin-right: 10px; 

9
}

（IE6的截图）

解决的办法有下面几种：

加上white-space: nowrap;
给浮动元素（上面的例子为li）一个确切的宽度值。
在IE6下用hack，让li以inline-block的方式呈现。（如果display: inline-block不起作用，点击这里）

建议继续学习

解决IE6从Nginx服务器下载图片不Cache的Bug （阅读 8,221）
浮动引起的文本重影（阅读 5,260）
IE6下position:absolute相邻元素margin-top失效的bug （阅读 3,924）
OverFlow -- 创建BFC,清除浮动（阅读 3,862）
让IE6支持min-width （阅读 3,683）
IE6中a标签location.href失效解决方法（阅读 3,484）
IE6下appendChild的一个小问题。（阅读 3,223）
CSS 简易浮动清除方法讨论（阅读 2,921）
IE双倍浮动边界Bug （阅读 2,842）
IE6下经典的请求abort问题（阅读 2,422）