CSS简单的浮点左左问题在IE兼容模式下

StackOverflow https://stackoverflow.com/questions/4792859

题

我试图并排两个盒子（左菜单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>
有帮助吗？

解决方案

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

.mainBox 是没有任何浮子的Div，因此它隐含地宽度为100％。也是边界 添加 到宽度，因此在测试时可能会导致意外行为。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top