css - IE9中的CSS浮动

Question

我有以下结构：

<form>
<ul>
<li>
<label for="#id">Item</label>
<input type="text" id="#id"/>
</li>
<li>
<label for="#id">Item</label>
<input type="text" id="#id"/>
</li>
</ul>
</form>

在标签上使用以下 css：

width: 250px;
float: left;
display: block;

在所有浏览器中，我都有：

label input
label input

在 IE9 中，我得到了类似的东西：

label input
      label
input 
label input

任何人都可以帮忙吗？

Answer 1

您可以清除 li 的浮动，您的问题就解决了

label {
    width: 250px;
    float: left;
    display: block;
}

li {
    clear: both;
    overflow: hidden;
}

Answer 2

漂浮时需要清除：

CSS清除修复：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

对您的 html 的更改：

<form>
 <ul>
  <li class="clearfix">
   <label for="id">Item</label>
   <input type="text" id="id">
  </li>
 <li class="clearfix">
   <label for="id1">Item</label>
   <input type="text" id="id1">
  </li>
 </ul>
</form>

一些备注，你的ID错了，必须以字母开头。