Как решить эту простую проблему с IE?

Question

Рассмотрим этот код:

<style type="text/css">

ul { clear: both; overflow: hidden; border: 3px solid red; margin-bottom: 10px; }
ul li { display: block; padding: 30px 80px; border: 1px solid green; float: left; }

</style>

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

В Firefox и Chrome (и, возможно, в Safari и Opera тоже - не тестировали) это выглядит нормально. Это означает, что <li>'s находятся в пределах зеленой границы <ul>'s.

Но в ie (9, 8 и 7) это не так. Есть ли способ получить ul CONTAIN в списке, например, в других браузерах?

Answer 1

Просто сделайте так, чтобы IE отображал ваш документ в стандартном режиме, добавив объявление типа документа в ваш HTML.

Причина в том, что только в режиме причуд в IE я могу представить, что ваши ul не содержат ваши li s. В стандартном режиме он должен отображать так же, как и другие браузеры, что доказано этой демонстрацией jsFiddle (просмотреть ее в IE), которая обеспечивает стандартный режим на панели предварительного просмотра.