HTML-код DOCTYPE вызывает неожиданную проблему с IE8 при рендеринге строк

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

HTML выглядит так:

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">@import url(styles/style.css);</style>
    </head>
    <body >
        <div class="test">
            <!-- float right -->
            <ul class="fr">
                <li><img src="images/1.gif" alt="image 1"/></li>
                <li><img src="images/2.gif" alt="image 2"/></li>
                <li><img src="images/3.gif" alt="image 3"/></li>
            </ul>
        </div>
    </body>
</html>

CSS-класс "test" выглядит следующим образом:

.test ul {list-style:none; }
.test li { display:inline;}

Это хорошо видно на Chrome и Firefox. Элементы li отображаются встроенными и в правой части страницы, все в одну строку.

Однако в IE8 эти элементы отображаются один под другим в правой части страницы.

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

<!DOCTYPE HTML>

с этой HTML-страницы, это хорошо видно даже в IE8. Кто-нибудь знает, что вызывает проблему, когда присутствует на этой странице?

Конечно, это всего лишь урезанная версия моей страницы, и я хочу использовать на своей странице для функций HTML5, поэтому просто удалить ее не кажется решением.

Источник

1 ответ

Решение

Я думаю, что это ошибка с display: inline в IE8. Попробуйте использовать:

.test li {display: inline-block; }
Источник
Другие вопросы по тегам