Question

我正在尝试并排放置两个盒子（一个200px左侧菜单，旁边是100％剩余宽度的主要内容区域）。

它适用于所有浏览器，但我们的很多客户都在使用IE6（不幸的是我们无法做到这一点），所以这必须支持IE兼容模式。不幸的是，这个简单的CSS不起作用！任何人都可以帮助我而不需要回到桌子上吗？

相关CSS：

.clear {
    clear:both;
}

/* Left menu */
.leftMenu{
    width: 200px;
    border:1px solid green;
    height:100px;
    float:left;
}

/* Main Content area */
.mainBox{
    width:100%;
    border:1px solid red;
}
.mainWrapper{
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>



</title><link rel="stylesheet" type="text/css" href="css/default.css" /></head>



<body>

    <form name="form1" method="post" action="default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIwNjAyODU4M2Rk5phxJ78Kc9Kf0nXvcJ7j7tQJPxw=" />

</div>

    <div class="mainWrapper">

        <div class="leftMenu">

        left

        </div>

        <div class="mainBox">

        main

        </div>

        <div class="clear"></div>

    </div>



    </form>

</body>

</html>

Answer 1

没有IE6所以无法测试，但无论如何。尝试从width: 100%中移除.mainBox并删除所有边框，而是使用背景颜色进行测试。我让它以IE7标准工作。

.mainBox是一个没有任何浮点数的DIV，因此隐式100％宽。边框添加到宽度，因此在测试时可能会导致意外行为。

在IE兼容模式下CSS简单浮动问题

1 个答案: