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不起作用，点击这里）

建议继续学习：

1. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读：7101)
2. 浮动引起的文本重影    (阅读：4007)
3. IE6下position:absolute相邻元素margin-top失效的bug    (阅读：3064)
4. OverFlow -- 创建BFC,清除浮动    (阅读：2992)
5. 让IE6支持min-width    (阅读：2831)
6. IE6中a标签location.href失效解决方法    (阅读：2411)
7. IE6下appendChild的一个小问题。    (阅读：2227)
8. IE双倍浮动边界Bug    (阅读：2142)
9. CSS 简易浮动清除方法讨论    (阅读：1991)
10. 这到底是谁之错？    (阅读：1481)