IE6浮动引起的一些BUG

LI浮动之后换行

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


(IE6的截图)

li {
	float: left;
	display: block;
}
li a {
	display: block;
	height: 30px;
	margin-right: 10px;
}
<ul>
	<li><a href="#">HELLO WORLD</a></li>
	<li><a href="#">HELLO WORLD</a></li>
	<li><a href="#">HELLO WORLD</a></li>
	<li><a href="#">HELLO WORLD</a></li>
	<li><a href="#">HELLO WORLD</a></li>
	<li><a href="#">HELLO WORLD</a></li>
</ul>

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

  • 给a或者li明确的宽度。
  • 让a元素也浮动。(可能会带来新的BUG
  • 去掉height,也就是不触发hasLayout。(可能会带来新的BUG
LI中的浮动元素以阶梯的方式呈现

继续用上面的HTML做为例子,CSS变为:

ul {		
	list-style: none;
}
li a {
	float: left;
	height: 30px;
	margin-right: 10px;
}

(IE6的截图)

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

  • 给li加上display: inline;。
  • 让li也浮动。
浮动元素文本换行

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

ul {		
	list-style: none;
}
li {
	float: left;
}
li a {
	margin-right: 10px;
}

(IE6的截图)

解决的办法有下面几种:

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

(待续……)

发表评论