IE6 7 下右浮动元素自动换行问题

1 篇文章 0 订阅
1 篇文章 0 订阅

IE6 7 下右浮动元素自动换行问题

问题原因:
IE6 IE7 IE8(Q) 下,若浮动元素之前存在兄弟行内非浮动元 素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边,导致该浮动元素折行。

标准参考

W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.
由上面的描述可以得到以下结论:如果一个元素浮动前是一个行内元素,则该元素浮动后,顶部应与其之前所在的行框顶部对齐。

关于浮动的详细信息,请参考 CSS 2.1 规范 9.5 Floats 中的内容。

问题分析:
代码:
<div style="width:500px;border:2px solid black">
<span>我是浮动元素左边的行内元素</span>
<span style="float:right">我是要右浮动的元素</span>
</div>

显示效果:
右浮动错误

浮动元素布局分析
浮动元素的Layout
明显 offset上出现了18px的距离(正好是浮动元素左边的行内元素的高度),PS:原谅我学艺不精,不懂得怎么解释这个offset的原理

问题触发条件:
同一个父容器内有多个行内元素;某些为非浮动元素,某些为浮动元素(可以是左浮动或右浮动);浮动的子元素不都是位于非浮动的子元素之前。因此建议,浮动元素应用在块级元素上会有更加和谐的显示。

解决方法:
方法有几种:使用绝对定位模拟右浮动,或者使用hack设置负的上外边距。不过这些多少回增加代码量,下面只介绍最简单的方法!
就是把浮动元素放在非浮动的行内元素之前!没错就是这么简单!

<div style="width:1000px;border:2px solid black">
        <span style="float:right">我是要右浮动的元素</span>
        <span>我是浮动元素左边的行内元素,现在在代码中放在了浮动元素后面</span>      
    </div>

结局后的正确显示

解决问题方法来自:http://www.jb51.net/css/73295.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值