页面文件是这样的
<div id="area" style="border: 1px solid #ccc; background: #eee;">
<div id="nav">
<a style="padding-left: 20px" href="#" onclick="loadWorkArea('pages/welcome.js','noTree');$jq('#navTitle').html('');">首页</a>
<span style="padding-left: 10px">当前位置：</span>
<span id="navTitle"></span>
<span style="margin-right: 20px; float: right">
<a href="<%=projectRootPath%>logout" class="line">退出</a>
</span>
<span style="padding-right: 20px; float: right">
当前用户：${LoginPerson.name != null ? LoginPerson.name : LoginUser.ygxm}
</span>
</div>
<!-- 工作区内容 -->
<div id="container" style="width: 100%; margin: auto;"></div>
</div>
在火狐、搜狗浏览器下显示正常，可是在ie下显示不正常。
三个span再添加一个"display:inline;"属性，专治IE下的这个问题，前提是作为三个float元素的容器的"#nav"元素，必须已经正常闭合且清除浮动。
左边容器写float:left也可以，父级清浮动，或者给右端的元素写定位。或者单独给IE下的右端元素写定位。
float:right让元素脱离文档流了，而左边的元素还在文档流里面。
这种情况建议写法是左边一个容器 float:left, 右边一个容器 float:right,左边的内容都扔左边，右边的内容都扔右边，父级清除浮动