【分享】行内元素后的浮动元素的定位在各浏览器中有差异

WebAdvocate 2010-09-06 05:02:49

加精

经常会遇到一种情况，那就是，我们需要把那些精美的图标放到一段文字的前面，把它做成精美的列表。。。这时候，如果选择定位方式，不知道各位会选哪种？但是，有一点儿我可以肯定，如果你使用浮动把图片定位到文字之前或之后的话，可能会出现兼容性问题，怎么个情况呢？看我的电影列表：

<div style="border:1px solid black; font:14px Verdana; width:200px; padding:5px;">

    The Lord of the Rings <span style="background:tomato; float:left;">*</span>

    <br/>

    <br/>

    Gone with the wind <span style="background:tomato; float:left;">*</span>

</div>

可惜啊可惜，在 IE 里竟然不好用。看截图：

IE里貌似float元素都被行内元素挤到下面去了。

首先复习一下浮动的概念。看看这3节：
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之七：浮动(Float)概述
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之九：浮动(Float)定位细则二

其中规定了：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。这是行框会被缩短。

很明显，IE 在此处的处理跟其他浏览器有所区别。它会将浮动元素贴着行框的底部放置，因此，浮动元素被折行放置。因此，经常有针对 IE 的做法是使用负的 margin-top 值将浮动元素抬高，有多高，自己控制。如果未考虑其他浏览器中的定位，那么，兼容性问题肯定会出现。

再试试多个元素的例子：

<div style="border:1px solid black; font:14px Verdana; width:500px; padding:5px;">

    <span style="background:gold;">Text1</span>

    <span style="background:lightblue;">Text2</span>

    <span style="background:pink;">Text3</span>

    <span style="background:tomato; float:right;">Some text aligning right</span>

    <span style="background:greenyellow;">Text4</span>

    <span style="background:peru;">Text5</span>

</div>

以上例子中，右浮动框处于几个span元素之间，也就是说它前面含有行内元素。看几个浏览器测试的截图结果：

那么，在Firefox中，什么情况下浮动元素会折行呢？
修改外层容器的宽度，看例子：

<div style="border:1px solid black; font:14px Verdana; width:300px; padding:5px;">

    <span style="background:gold;">Text1</span>

    <span style="background:lightblue;">Text2</span>

    <span style="background:pink;">Text3</span>

    <span style="background:tomato; float:right;">Some text aligning right</span>

    <span style="background:greenyellow;">Text4</span>

    <span style="background:peru;">Text5</span>

</div>

这时，只看浮动元素的位置，各浏览器中表现相同（排除IE中盒子模型和浮动元素对高度影响的问题，IE会把外面的包含框给撑开）：

可见，浮动元素会缩短行框的宽度以把自己放到跟行框顶部齐平的位置，如果行框无法被缩短，则会将浮动元素折行放置。

但是在IE6 IE7 IE8(Q)中却不是这样，无论行框中行内元素占据后剩下的宽度是否还够浮动元素用，都会折行，放置到其下。

解决方案可以看这里：http://www.w3help.org/zh-cn/causes/RM8005

原文章：http://www.w3help.org/zh-cn/causes/RM8005

更多兼容性问题：
【分享】浏览器兼容性问题目录

...全文