Question

我正在努力解决IE6浮动问题。（我知道IE6糟透了，但是我的大公司使用它......）我创建了一个简单的标题，正文，页脚布局，内部区域和侧边栏。基本上是一个常见的博客布局。

我在IE6中实现这一点没有问题，但在内容区域内，我试图在顶部创建一个特色区域div，然后在它下面并排两个div。它在现代浏览器中看起来很好，但在IE6中它将第二个div放在第一个以下。就像div对于容器而言太大了所以它推动了第二个。但这应该不是问题，因为它们足够小（宽度，填充，边距）以适应..

这是我的代码：

HTML

<body>
<div id="page-wrap">
<div id="header">
</div>

<div id="content">
<div id="feature">
</div>

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

<div id="#1">
</div>

<div id="#2">
</div>

</div><!--Content End-->

<div id="sidebar">
</div>


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

<div id="footer">
</div>

</div><!--Body Content End-->
</div><!--Page Wrap End-->

</body>

CSS

#page-wrap {
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
}
#header {
    width: 954px;
    height: 50px;
    padding: 10px 0;
    margin: 0 3px 2px 3px;
    border-bottom: #7E7871 dotted 3px;
}
#content {
    float: left;
    width: 650px;
    margin: 0;
    padding: 15px 5px 0 15px;
}
#feature {
    width: 650px;
    margin: 0;
}
#content #1 {
    border-right: thin solid #CCC;
    width: 305px;
    margin: 0;
    padding: 0;
    float: left;
}
#content #2 {
    width: 305px;
    margin: 0;
    padding: 0;
    float: right;
}
#sidebar {
    float: right;
    width: 250px;
    padding: 0 10px 20px 10px;
    margin: 0;
    background: url(../_images/bg_aside.gif) repeat-y;
}

Answer 1

由于您没有提供有关您的HTML / CSS在浏览器中不起作用的详细信息，我在您的代码中可以找到的唯一错误是您有一个迷路{{1 }}：

</div>

Answer 2

下面的原因之一是由于内容大于div。

但是，您的css与提供的HTML不匹配。没有实际内容，很难调试其中的一部分。

假设＃2和＃1是#discounts和#programs，我建议添加一个溢出：scroll;看看它是如何变化的。

IE6 CSS Float Dropdown问题

2 个答案: