Как заставить элементы разметки HTML5 хорошо отображаться в IE - PullRequest
2 голосов
/ 01 августа 2011

Каков наилучший способ заставить элементы разметки HTML5, такие как <header>, <section> и <footer>, хорошо отображаться в IE?

Обычно, когда я применяю CSS к элементам HTML5,стиль не имеет места.Но я видел, как это делается на других сайтах, таких как colourfreak.com , и мне нужна помощь.

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

nav a {
    text-decoration: none;
}

Подробное объяснение или хорошая статья будут полезны.Спасибо!

Ответы [ 3 ]

9 голосов
/ 01 августа 2011

Для IE мы должны создать новые элементы HTML5 с JS. Создайте новый файл, назовите его, например, html5.js и включите этот скрипт в вашу область <head>. Все будет хорошо.

document.createElement('article');
document.createElement('aside');
document.createElement('details');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('main');
document.createElement('menu');
document.createElement('nav');
document.createElement('section');
document.createElement('summary');

Это требуется только для IE, поэтому вы можете использовать условные комментарии:

<!--[if IE]><script src="js/html5.js"></script><![endif]-->

Поскольку эти элементы отображаются в виде встроенных элементов, возможно, вы захотите добавить это правило в свой файл CSS:

article, aside, details, figcaption, figure, footer,
header, hgroup, main, menu, nav, section, summary { display: block; }
7 голосов
/ 01 августа 2011

Вы можете использовать HTML5 Shiv ...

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

Также вы можете использовать шаблон HTML5 ... (Включая HTML 5 Shiv)

http://html5boilerplate.com/

2 голосов
/ 01 августа 2011

Я почти уверен, Модернизатор решит вашу проблему, а также множество других кросс-браузерных проблем с CSS3.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...