如何修复IE7浮动清除组合

Question

我有一个 field_wrapper 类 div，其中包含 3 个子 div field_label、field_input 和 field_error

我需要将 field_label、field_input 和 field_error 并排放在前两者的下方。

请参阅下面的 css 代码以了解我是如何实现的，我的问题是它在 IE7 中不起作用。清除两者都应用于 field_error 不起作用。

即使在谷歌上搜索了很长时间后，如果不添加 HTML 标记，我也找不到合适的方法来解决这个问题。请建议 css 提示或任何其他方法以避免额外的标记代码

.field_wrapper
{
 clear:both;
}

.field_label
{
 float:left;
 width:40%;
}
.field_input
{
 float:left;
 width:40%;
}
.field_error
{
 clear: both;
 color:#FF0000;
 float: right;
 text-align:left;
 width: 60%;
}

<form method="post" action="http://localhost/locations/add">
 <div class="field_wrapper">
  <div class="field_label">
   <label for="location_add_name">Name</label>
  </div>
  <div class="field_input">
   <input type="text" id="location_add_name" value="" name="name">
  </div>
  <div class="field_error">
   <p>The Name field is required.</p>
  </div>
 </div>
 <div class="field_wrapper">
  <div class="field_label">
   Address
  </div>
  <div class="field_input">
   <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
  </div>
  <div class="field_error">
  </div>
 </div>
 <div class="form_submit">
  <input type="submit" value="Add" name="submit"> 
 </div>
</form>

Answer 1

如果你不想去掉左边的浮动。您可以使用此包装代码

.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }

它每次都对我有用（IE6 也是如此）

更新：

我又看了一遍，稍微更改了标记，也使它成为有效的 xhtml。 只需将类放在P标签上，不需要额外的div。

    .field_wrapper
    {
     clear:both;
    }

    .field_label
    {
     float:left;
     width:40%;
    }
    .field_input
    {
     float:left;
     width:40%;
    }
    .field_error
    {
     clear: both;
     color:#f00;
     width: 60%;
    }


<form method="post" action="http://localhost/locations/add">
    <div class="field_wrapper">
        <div class="field_label">
            <label for="location_add_name">Name</label>
        </div>
        <div class="field_input">
            <input type="text" id="location_add_name" value="" name="name" />
            <p class="field_error">The Name field is required.</p>
        </div>
    </div>

    <div class="field_wrapper">
        <div class="field_label">Address</div>
        <div class="field_input">
            <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
        </div>
    </div>
    <div class="form_submit">
        <input type="submit" value="Add" name="submit" /> 
    </div>
</form>

Answer 2

从 'field_error' 中删除 float:right

Answer 3

让我先告诉你一件事。如果您在容器中有浮动内容，则容器永远不会包含它，除非您将容器溢出属性设置为隐藏或使其浮动。喜欢

.field_wrapper
{
 clear:both;
 overflow:hidden;
}

现在它包含所有浮动元素。现在对于您的错误 div，因为您将元素浮动到左侧，所以请明确：仅向左，它会起作用。

谢谢