首页 > 设计 > WEB开发 > 正文

IE6/7下float: right 换行的BUG修改

2019-11-02 18:49:02
字体:
来源:转载
供稿:网友

这几天接手了一个PC端的需求,遇到了一个问题,就是float:right在IE6/7下会换行展示的BUG。调整IE的兼容性着实让人头疼,各种奇奇怪怪的问题层出不穷。话不多说,下面介绍下解决办法。

首先,我们来举个栗子:

<div id="box"> <span class="left">左边的文本内容</span> <p class="right">右边的文本内容</p></div>

这个是基本的文档结构,接下来是CSS样式:

* { margin: 0; padding: 0;}#box { width: 300px; padding: 10px; font-size: 12px; overflow: auto; border: 1px solid blue;}p.right { float: right;}

这样一来,在Chrome, Firefox,IE8+等浏览器中显示均正常,显示效果如下: 这里写图片描述

但是在IE6/7中显示的效果确实右边的内容下沉一行,变成了折行显示,这显然是不符合要求的。在折腾css许久无果之后,发现了一个极为简便的修改方式,就是调整文档顺序,即将HTML代码进行调整,无需操作CSS代码,具体修改如下:

<div id="box"> <p class="right">右边的文本内容</p> <span class="left">左边的文本内容</span></div>

将需要向右浮动的元素位置调整至无需浮动元素之前即可,这样便可完美解决IE6/7下元素向右浮动折行的问题~~~


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表