IE8 не может правильно выровнять сложенные плавающие элементы фиксированного размера

Question

Я пытаюсь плавать элементы фиксированной ширины (поле 300px + 40px) и высоты, которые являются целыми числами, кратными фиксированному значению (поле 400px + 40px), чтобы все они идеально складывались. Я помещаю их в контейнер, который имеет фиксированную ширину, чтобы поместиться ровно в два ряда (680px = 2*300px + 2*40px). Браузеры не IE выполняют эту задачу отлично, но IE8 не работает по причинам, которые я не могу понять. Может кто-нибудь объяснить, почему IE8 не может выполнить эту, казалось бы, простую задачу, и если это возможно исправить, без необходимости явно "clear: left;" на этих элементах? (Если я добавлю встроенный "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 не принимает несколько классов в режиме причуд?