当前位置: 代码迷 >> 跨浏览器开发 >> 行内元素后的浮动元素的定位在各浏览器中有差异
  详细解决方案

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

热度:6398   发布时间:2013-02-26 00:00:00.0
【分享】行内元素后的浮动元素的定位在各浏览器中有差异
经常会遇到一种情况,那就是,我们需要把那些精美的图标放到一段文字的前面,把它做成精美的列表。。。 这时候,如果选择定位方式,不知道各位会选哪种?但是,有一点儿我可以肯定,如果你使用浮动把图片定位到文字之前或之后的话,可能会出现兼容性问题,怎么个情况呢?看我的电影列表:
HTML code
<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 值将浮动元素抬高,有多高,自己控制。如果未考虑其他浏览器中的定位,那么,兼容性问题肯定会出现。

再试试多个元素的例子:
HTML code
<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中,什么情况下浮动元素会折行呢?
修改外层容器的宽度,看例子:
HTML code
<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

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


------解决方案--------------------------------------------------------
是什么奖??
------解决方案--------------------------------------------------------
果断收藏学习。。。
------解决方案--------------------------------------------------------
收藏学习
------解决方案--------------------------------------------------------
收藏 研究。
------解决方案--------------------------------------------------------
值得收藏,好。
------解决方案--------------------------------------------------------
wo ding din gidn dg glmsafgsafd
------解决方案--------------------------------------------------------
恩,值得学习
------解决方案--------------------------------------------------------
  相关解决方案