IE6/7 中的 CSS float 问题

Question

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

我的 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

你确实需要包含 float ，即使用某种形式的间隙，但你不需要 float 所有内容

首先移除内联样式，取消 float fieldset

<fieldset style="float:left">

如果你想让fieldset“shrink-wrap”( float 一个没有宽度的元素应该这样做)你最好在它上面设置一个宽度或最大宽度，IE没有完全正确的收缩包装行为要“收缩”的元素包含具有 hasLayout 的元素，这个“fieldset”之所以这样做是因为内部有 float 的 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;
}