IE7内の選択的クリアフロート項目

Question

私は左にフロートされた5つの項目のリストを持っていて、インラインで表示されます。 4番目の項目では、左を離れてセットし、それによって4番目の項目が新しい行になります。

しかしIE7では、5番目の項目は、新しい行の4番目の項目の横にあるフローティングの代わりに、最初の行の3番目の項目の横に浮かぶ。IE7のためにこれを働くためにこれを得る方法はどのような考えですか？

テスト： http://jsfiddle.net/3dssp/4/

Answer 1

私はこれに遭遇しました、そして残念ながら私が知っている唯一の解決策は、浮動小数点をクリアするための別々のクリア要素を持つことです。

それは醜いですが機能します：

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li class="clear">&nbsp;</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

.

CSS：

.clear{
  display: block;
  float: none;
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

.

およびフォント宣言は、クリアリングDIVが1ピクセルの高さであることを保証します。それ以外の場合は、現在のフォントサイズ（YAY！）の高さになります。

これはIE7の場合にのみ、マークアップをきれいに保ち、JavaScriptを使用してこの追加のGUFFに動的に追加してください。