IE6/7 中的 CSS 浮动问题答案

【问题标题】：CSS float issue in IE6/7IE6/7 中的 CSS 浮动问题
【发布时间】：2011-08-14 11:39:29
【问题描述】：

我在 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 显示以下内容：

我该如何解决这个问题？

【问题讨论】：

您使用哪种文档模式？
@kirilloid - HTML 4.01 严格

标签： css internet-explorer-7 css-float internet-explorer-6

【解决方案1】：

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

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

<fieldset style="float:left">

如果你想让fieldset “shrink-wrap”（浮动一个没有宽度的元素应该这样做）你最好在它上面设置一个宽度或最大宽度，IE 还没有完全得到收缩- 正确包装要“缩小”的元素的行为包含具有 hasLayout 的元素，此 'fieldset` 之所以这样做是因为内部浮动 div(s)

那么这个 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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：