不得不说IE是个让人又爱又恨的产品，对于前端开发者来说，IE系列版本的兼容性问题最令人头痛，今天笔者在工作中发现一个IE7下的浮动异常情况：本来想让两个块元素并排在一行，但在给右面的元素添加float:right属性后，右面的元素在IE7下换行了。

程序猿眼中的IE浏览器

例如：

<ul>
<li>我是左边/li>
<li class="test">我是右边</li>
</ul>
<style>
ul li{display:inline-block;}
.test{float:right}
</style>

理想情况下左边和右边应该在一排，而在IE7下，右边会另起炉灶，另起一行。

原因分析

在部分浏览器下，当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。

解决办法

1、将含有float属性的元素置于最前，也就是说将右边的<li>写到左边的<li>之前。

2、给非float元素添加float属性。

这样处理之后，页面就会在IE7下正常显示了。