IE7 div с полями clear: right и float: left - всплывают

Question

В последнее время я ударился головой о стол, чтобы решить эту проблему. Не сработало. Я знаю, что это может быть решено путем редактирования содержимого с некоторыми элементами очистки. К сожалению, используется некоторая сортировка javascript, и Sourcode генерируется компонентами CMS, так что это будет мой последний выстрел.

У меня есть несколько коробок, плавающих всегда 2 подряд. Коробки имеют различную высоту, но равную ширину и все помещены в контейнер со статической шириной. Ссылка показывает источник мне нужно воспроизвести проблему. Мои Коробки плыли влево. Я попытался исправить это с помощью clear: left на нечетных и clear: right на четных элементах. Но это работает только в браузерах ff / ie8 / chrome, а не ie7.

Пример: http://www.i3rutus.de/ie7divfloatexample/

Кто-нибудь знает возможность исправить эту проблему, просто отредактировав CSS, а не реальный XHTML? Проблема появляется в IE7. IE8, Chrome и FF работают нормально.

Есть идеи?

Заранее спасибо

Answer 1

Просто удалить

.even {
    clear: left;
}
.odd {
    clear: right;
}

и это работает как и предполагалось.

Answer 2

Вот сделка. Вам нужно только пропустить одну из каждой пары ящиков. Вот измененные правила CSS:

  .even {
  float: left;
  clear: left;
  margin-top: 0
  }

  .odd {            
  }

Демо

(Кстати, из-за твоего использования странно и даже я некоторое время гонялся за своим хвостом;))

Answer 3

Если вы можете включить JS в заголовок, то, возможно, попробуйте использовать http://code.google.com/p/ie7-js/?

Я поиграл с ним, но с учетом float: правая ошибка, это, вероятно, немного сложнее, чем экспериментировать со значениями float.

- обновление -

Я, кажется, смог заставить его работать в ie7:

удалить с плавающей запятой: оставлено на .clear, добавлено значение с плавающей запятой: слева; на полях: 0px к .even