1

我正在尝试浮动固定宽度（300px + 40px 边距）和高度是固定值（400px + 40px 边距）的整数倍的元素，以便它们都应该完美堆叠。我将它们浮动在一个具有固定宽度的容器中，以恰好适合连续两个（680px = 2*300px + 2*40px）。非 IE 浏览器完美地执行了这项任务，但 IE8 因我无法理解的原因而失败。谁能解释为什么 IE8 不能完成这个看似简单的任务，以及是否可以修复它，而不必明确地“清除：左；” 在那些元素上？（如果我向该元素添加内联“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 进入了怪癖模式，而 .class.class 把它搞砸了。看：

IE8 在怪癖模式下不接受多个类？

于 2013-01-10T23:06:59.840 回答