关于css布局的一个小问题

Question

页面文件是这样的

    <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下显示不正常。

Answer 1

三个span再添加一个"display:inline;"属性，专治IE下的这个问题，前提是作为三个float元素的容器的"#nav"元素，必须已经正常闭合且清除浮动。

Answer 2

float:right让元素脱离文档流了，而左边的元素还在文档流里面。
这种情况建议写法是左边一个容器 float:left, 右边一个容器 float:right,左边的内容都扔左边，右边的内容都扔右边，父级清除浮动

Answer 3

左边容器写float:left也可以，父级清浮动，或者给右端的元素写定位。或者单独给IE下的右端元素写定位。