css - 浮動要素が適切にクリアされないための IE 7 の回避策はありますか?

Question

他の CSS フロートの問題に対する IE 7 の回避策はたくさんありますが、この問題に対する回避策はまだ見つかっていません。要素にclearとfloatプロパティの両方がある場合、クリアが正しく機能しません。

この jsFiddle は問題を示しています。私は非常に基本的な問題を解決しようとしています。ラベル/フォーム項目のペアを持つフォームがあります。ラベルは左側に配置し、フォーム項目はラベルの右側に配置する必要があります。次のラベルは次の行に表示されます。この単純な HTML では:

<fieldset>
  <label>Label 1:</label>
  <input type="text" />

  <label>Label 2:</label>
  <input type="text" />
</fieldset>

この CSS で十分です。

label {
    width: 200px;
    text-align: right;
    clear: both;
    float: left;
}

input {
    float: left;
}

ただし、代わりに起こっているのは、2 番目のラベルが float をクリアして次の行にレンダリングされるにもかかわらず、隣接する入力が最初の行に表示されることです。

マークアップを追加する以外に、この問題の回避策はありますか?

score 0 · Accepted Answer

グループを個別のdivで囲むと、問題は解決します。もちろん、クリアはまったく必要ありません。

1 に答える 1