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 は間違っています。文字で始まる必要があります。