Question

我试图浮动固定宽度的元素（300px + 40px边距），以及固定值（400px + 40px边距）的整数倍的高度，这样它们都应该完美堆叠。我将它们漂浮在一个容器中，该容器具有固定的宽度以恰好适合连续两行（680px = 2 * 300px + 2 * 40px）。非IE浏览器完美地执行此任务，但IE8因我无法理解的原因而失败。任何人都可以解释为什么IE8不能做这个看似简单的任务，如果有可能修复它，而不必明确'清除：左;'在那些元素？（如果我向该元素添加内联“clear：left;”，IE8将清除它，但它的位置根本不会改变，所以它不像元素“碰到”“高”元素。）

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; 
}

Answer 1

可能是IE正在进入怪癖模式而.class.class正在弄乱它。参见：

IE8 not accepting multiple classes in quirks mode?

IE8无法正确对齐固定大小的堆叠浮动元素

1 个答案: