这几天接手了一个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下元素向右浮动折行的问题~~~