- LI浮动之后换行
-
在一个没有设定宽度的浮动元素#floated里，有一个触发了hasLayout的子元素#content，并且#content没有设定宽度。那么#content和#floated会以100%的宽度呈现，占满这一行。例子：
（IE6的截图）1li {2float:left;3display:block;4}5li a {6display:block;7height:30px;8margin-right:10px;9}1<ul>2<li><ahref="#">HELLO WORLD</a></li>3<li><ahref="#">HELLO WORLD</a></li>4<li><ahref="#">HELLO WORLD</a></li>5<li><ahref="#">HELLO WORLD</a></li>6<li><ahref="#">HELLO WORLD</a></li>7<li><ahref="#">HELLO WORLD</a></li>8</ul>在上面的例子中，a元素触发了hasLayout，但是没有设定宽度，在IE6里会产生换行。
解决办法有下面几种： - LI中的浮动元素以阶梯的方式呈现
-
继续用上面的HTML做为例子，CSS变为：
1ul {2list-style:none;3}4li a {5float:left;6height:30px;7margin-right:10px;8}
（IE6的截图）在标准浏览器下，如果有足够的宽度，例子中所有的a元素会构成一行。但是在IE6下面，a元素是以阶梯的方式呈现。解决的办法有下面几种：
- 给li加上display: inline;。
- 让li也浮动。
- 浮动元素文本换行
-
上图中的li没有设置宽度，当容器的宽度不够时，正常情况下应该是li下沉，另起一行。但是在IE6下面却是li里面的文本换行，导致混乱的布局。下面是产生BUG的CSS：
1ul {2list-style:none;3}4li {5float:left;6}7li a {8margin-right:10px;9}
（IE6的截图）解决的办法有下面几种：
- 加上white-space: nowrap;
- 给浮动元素（上面的例子为li）一个确切的宽度值。
- 在IE6下用hack，让li以inline-block的方式呈现。（如果display: inline-block不起作用，点击这里）
IE6浮动引起的一些BUG
本机暂存
同分类推荐文章
- translateZ() （2026-06-25 21:18:56）
- translateY() （2026-06-25 21:17:56）
- translateX() （2026-06-25 21:16:01）
建议继续学习
- 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
- 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）
- 各公司对前端开发的职位描述 （累计阅读 10,405）
- iframe大小自适应 （累计阅读 10,057）
- 浏览器的渲染原理简介 （累计阅读 8,377）
- 解决IE6从Nginx服务器下载图片不Cache的Bug （累计阅读 8,357）
- 程序员眼里IE浏览器是什么样的 （累计阅读 8,011）
- 2010网页设计趋势 （累计阅读 7,818）
- Web前端工程师编程能力飞升之路 （累计阅读 7,691）
- 颜色的代码表达式 （累计阅读 7,665）