IE6 / 7中的CSS浮动问题

Question

我在IE6和IE7中遇到了一个奇怪的CSS浮动问题。

我的HTML是：

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>
    <div class="display-label"># resources</div>
    <div class="display-field">2</div>
    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>
    <div class="display-label">Requested by</div>
    <div class="display-field">1066594</div>
    <div class="display-label">Status</div>
    <div class="display-field">Active</div>
</fieldset>

我的CSS是：

.display-label, .display-field
{
    padding: 0.35em 0.25em;
    float: left;
}

.display-label
{
    width: 13em;
    text-align: right;
    clear : left;
    font-weight: bold;
}

.display-field
{
    margin-left: 1em;
}

IE 8+和Firefox正确显示如下：

但是，

IE6和7显示以下内容：

我该如何解决这个问题？

Answer 1

编辑：您需要在标签和字段创建后指定一个清除。从技术上讲，您应该使用容器元素包装标签和字段以防止错位，但这应该可以实现您所需要的。

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>

    <div style="clear:both;"></div>

    <div class="display-label"># resources</div>
    <div class="display-field">2</div>

    <div style="clear:both;"></div>

    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>

    <div style="clear:both;"></div>

    ...

</fieldset>

Answer 2

你需要包含花车，即使用某种形式的间隙，但你不需要漂浮所有东西

首先删除内联样式，取消fieldset

<fieldset style="float:left">

如果你想让fieldset“收缩包装”（浮动没有宽度的元素应该这样做）你最好设置一个宽度或最大宽度，IE还没有完全得到收缩包装行为正确的元素“收缩”包含hasLayout的元素，这个'fieldset`由于里面浮动的div而做了

那么这个CSS应该可以在不破坏HTML的情况下工作

.display-label, 
.display-field {
    padding: 0.35em 0.25em;
}

.display-label {
    float: left; 
    clear: left; 
    width: 13em; 
    text-align: right; 
    background: #eee; 
    font-weight: bold;
}

.display-field {
    overflow: hidden;
}