Невозможно стилизовать элементы HTML5 в IE (несмотря на shiv и display: block)

Кажется, я не могу понять, чего не хватает. Все затронутые элементы имеют display:block

Пример стиля для элемента header:

header
{
    width: 923px;
    height: 55px;
    background: #395168;
    margin-top: 25px;
}

html css styles semantic-markup
person Matthis Stenius    schedule 20.02.2012    source источник
comment
Какая версия IE и в чем именно проблема?   -  person jeanreis    schedule 21.02.2012
comment
IE 6-8. Основная проблема в том, что не отображается цвет фона.   -  person Matthis Stenius    schedule 21.02.2012
comment
Вы загружаете шив на ‹head›? Не могли бы вы показать нам демонстрационную страницу? Правильно ли отображается заголовок по ширине, высоте и верхнему краю?   -  person Fabrizio Calderan    schedule 21.02.2012
comment
Вот страница: stenius-online.com   -  person Matthis Stenius    schedule 21.02.2012
comment
Трудно сказать точно, что это могло быть, но сохранение страницы (в IE8, полная страница - не .mht) исправляет фон заголовка, но разбивает тело (и сайт больше не центрируется). Может, тебе стоит разобраться в этом. Попробуйте обычный подозреваемый: zoom: 1 в заголовке.   -  person jeanreis    schedule 21.02.2012
comment
У меня он отлично работает как в IE7, так и в 8, так что я подозреваю, что вы это исправили?   -  person Ian Devlin    schedule 21.02.2012
comment
Странный. Не вносил никаких изменений. Просто попробовал в IE 8 через Parallels Desktop, но безуспешно.   -  person Matthis Stenius    schedule 21.02.2012

Ответы (5)


arrow_upward
1
arrow_downward

IE 6-8 не знает о теге header, поэтому к нему нельзя применить стили. Чтобы IE распознал этот тег, добавьте приведенный ниже сценарий в раздел head.

<script language='javascript'>
document.createElement('header');
</script>

Это решит вашу проблему.

person Mohan    schedule 21.02.2012

arrow_upward
1
arrow_downward

Решил вопрос. Что я сделал, так это то, что я поместил ссылку на сценарий под ссылкой на таблицу стилей, и внезапно IE 6-8 применил мои стили.

<link rel="stylesheet" href="styles/style.css" type="text/css">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Большое спасибо за попытку помочь мне :)

person Matthis Stenius    schedule 23.02.2012

arrow_upward
0
arrow_downward

Может, просто попробуй дать ему класс?

person UniAvenger    schedule 20.02.2012
comment
Он правильно выбрал его с помощью CSS, поэтому теоретически он должен применить стиль. - person Tom Gullen; 21.02.2012

arrow_upward
0
arrow_downward

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

<div class="header">
    <header>
    </header>
</div>

Это явно не очень хорошо, но оно превосходит любое решение, основанное на JS, поскольку оно не будет странно отображаться с отключенным JS.

person Tom Gullen    schedule 20.02.2012
comment
Хм .. Делал IE-тестирование в Adobe Browser Labs. Поддерживает ли он даже JS? Если нет, то, вероятно, ответ. Придется достать компьютер, чтобы проверить его по-настоящему. Вернусь с ответом, как только я это сделаю. - person Matthis Stenius; 21.02.2012

arrow_upward
0
arrow_downward

У меня была эта проблема сегодня, обновился до последней версии кода html5shiv (теперь перемещен в Github здесь: https://github.com/aFarkas/html5shiv), переместил таблицу стилей над ссылкой на скрипт, у всех элементов был установлен display: block, но стилизовать их все равно не удалось ...

Я понял, что в моей разметке нет объявления doctype - добавив:

<!DOCTYPE html>

решил проблему, теперь все стили применяются правильно - так что полное решение:

<!DOCTYPE html>
<html>
    <head>
        <link href="/css/styles.css" rel="stylesheet" type="text/css">
        <script src="/js/html5shiv.min.js"></script>
    </head>
    <body>
        <!-- html 5 markup -->
    </body>
</html>
person maxscan    schedule 04.04.2014