1

固定幅 (300px + 40px マージン) の要素と固定値 (400px + 40px マージン) の整数倍の高さの要素をフロートさせようとしています。ちょうど 2 行に収まるように固定幅のコンテナー内にそれらを浮かせています (680px = 2*300px + 2*40px)。IE 以外のブラウザーはこのタスクを完全に実行しますが、IE8 は理解できない理由で失敗します。なぜ IE8 がこの一見単純なタスクを実行できないのか、明示的に 'clear: left;' を使用せずに修正できるかどうかを説明できますか? それらの要素について？(その要素にインラインの「clear: left;」を追加すると、IE8 はそれをクリアしますが、その位置はまったく変わらないため、要素が「tall」要素に対して「ぶつかり合っている」わけではありません。)

http://jsfiddle.net/Nun2L/

HTML:

<div id="boxes">

  <div class="box tall"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>

CSS:

#boxes {
  position: relative;
  width: 680px;
  margin-left: -40px;
}

.box {
  position: relative;
  float: left;
  width: 300px;
  height: 200px;
  margin-left: 40px;
  margin-bottom: 40px;
  background-color: red;
}

.box.tall {
  height: 440px; 
}
4

1 に答える 1

0

IE が quirks モードに陥り、.class.class が混乱している可能性があります。見る：

IE8は互換モードで複数のクラスを受け入れませんか?

于 2013-01-10T23:06:59.840 に答える