html - 两个 float 元素之间的非 float 元素 - IE7

Question

这是我的代码(非常简化):

<div style="float: left;">
    <div style="float: left;">
        <!-- Some content -->
    </div>
    <div style="float: right;">
        <!-- Some content -->
    </div>
    <form method="post" style="display: block; width: 100%; position: relative;">
        <fieldset>
            <!-- Some content -->
        </fieldset>
    </form>
</div>

在 IE8、FF3.6/4、Chrome 和 Opera 中看起来不错。 Div 没有指定宽度，我希望表格填充剩余空间。但在 IE7 中，非 float 形式下降得更低。我应该怎么办？

可以看到这个on this site (顶栏)

Answer 1

您是否有不想指定宽度的原因？看起来他们的 header 比必要的要冗长得多。像下面这样的东西会为你完成同样的事情吗？

<div style="float: left; width:100%;">
<div style=" display:block;float: left; position:relative; top:0; left:0; width:20%">
    <p>LEFT SIDE</p>
</div>
<div style="display: block; position: relative; float:left; top:0; left:0; width:60%;">
        <form method="post">
    <fieldset>
        form stuff
    </fieldset>
</form>
</div>
<div style="display: block; float: left; position:relative; top:0; left:0; width:20%;">
    <p>RIGHT SIDE</p>
</div>

这应该在 IE 中工作，但 CSS 可能需要调整以补偿旧 IE 处理盒模型的方式。