3

左に浮かんでインラインで表示される5つのアイテムのリストがあります。4 番目の項目で、左にクリアを設定したため、4 番目の項目が新しい行になりました。

しかし、IE7 では、5 番目のアイテムは、新しい行の 4 番目のアイテムの隣に浮動するのではなく、最初の行の 3 番目のアイテムの隣に浮動します。これをIE7で動作させる方法はありますか?

jsfiddle.net/3dSsP/4/

4

1 に答える 1

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 ピクセルのみになることが保証されます。それ以外の場合は、現在のフォント サイズの高さになります (イェイ!)。

これはIE7専用なので、マークアップをきれいに保ち、IE8未満のjavascriptを使用してこの余分なガフを動的に追加します.

于 2012-05-21T14:26:58.477 に答える