Выборочные очистные поплавные элементы в IE7

Question

У меня есть список из 5 элементов, которые плавают влево и отображаются встроенным. На 4-м пункте я устанавливаю четкое левое, тем самым вызывая 4-й элемент в новую строку.

Но в IE7 5-й элемент плывет рядом с третьим элементом на первой строке, а не плавающей рядом с 4-го элементом на новой строке.Любые идеи, как заставить это работать для IE7?

Тест: http://jsfiddle.net/3dssp/4/

Answer 1

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

Это безобразно, но это работает:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li class="clear">&nbsp;</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

.

CSS:

.clear{
  display: block;
  float: none;
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

.

Декларации шрифта и шрифта обеспечит очистку div - всего 1 пиксель высотой, в противном случае это будет высота текущего размера шрифта (yay!).

Как это только для IE7, я бы держал вашу разметку в чистоте и динамически добавляю в этот дополнительный ГКФ с JavaScript для просто