Fatal编程技术网

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

internet-explorer css

Internet explorer IE兼容模式下的CSS简单左浮点问题,internet-explorer,css,ie-compatibility-mode,Internet Explorer,Css,Ie Compatibility Mode,我试图得到两个并排的框（一个200px的左菜单，旁边是一个100%剩余宽度的主内容区） 它在所有浏览器中都能正常工作，但我们的许多客户机都在使用IE6（不幸的是，我们对此无能为力），因此这必须支持IE兼容模式。不幸的是，这个简单的CSS不起作用！有谁能帮我而不让我回到桌子旁吗 相关CSS： .clear { clear:both; } /* Left menu */ .leftMenu{ width: 200px; border:1px solid green;

我试图得到两个并排的框（一个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>

。清除{
明确：两者皆有；
}
/*左菜单*/
.左菜单{
宽度：200px；
边框：1px纯绿色；
高度：100px；
浮动：左；
}
/*主要内容区*/
.mainBox{
宽度：100%；
边框：1px纯红；
}
.mainWrapper{
}
左边
主要的

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


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