1 min read

IE6 下的浮动换行问题

如下 HTML 代码:

<p>
<a href="#">普通的行内元素</a>
<a href="#">普通的行内元素</a>
<a href="#" class="fl-r">普通的行内元素 - 右浮动</a>
</p>

CSS 样式如下:

.fl-r{float:right;}

在现代浏览器下,它会显示成一行,但 IE6 下,右浮动的元素显示在新一行,这样 p 元素的高度就增加了,如下图:

ie6 浮动换行

ie6 浮动换行

解决办法有多个,比如:

  1. 将前两个 a 元素左浮动
  2. 将 p 元素相对定位 position:relative,并且将最后一个 a 绝对定位

但这两种办法多少都有些过头,最简单的方法,将右浮动的元素提到最前:

<p>
<a href="#" class="fl-r">普通的行内元素 - 右浮动</a>
<a href="#">普通的行内元素</a>
<a href="#">普通的行内元素</a>
</p>

这样 IE6 下它们就显示在同一行。

报告问题 修订