0

我试图并排放置两个框（一个 200 像素的左侧菜单，旁边是一个 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>
4

1 回答 1

2

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

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

于 2011-01-25T11:31:06.443 回答