Commentaire: Le navigateur ne définira aucun style pour des éléments inconnus (différents navigateurs auront différents styles par défaut pour les éléments). Dans les versions avant IE9, il est également impossible de définir des styles pour des éléments inconnus. Il existe une solution à ce problème. Les amis intéressés peuvent y faire référence.
Chaque navigateur a une liste des éléments HTML qu'il prend en charge. Les éléments qui ne sont pas sur la liste seront considérés comme des éléments inconnus. Le navigateur ne définira aucun style pour des éléments inconnus (différents navigateurs auront différents styles par défaut pour les éléments). Dans les versions avant IE9, il est également impossible de styliser des éléments inconnus. Le DOM des éléments inconnus est également affiché de manière incorrecte, et IE insérera un nœud vide sans éléments enfants dans le DOM. Tous les éléments que vous pensiez à l'origine devenir des enfants de cet élément inconnu deviendront leurs nœuds frère.
Il existe une solution à ce problème. Avant d'utiliser la balise d'article, utilisez JS pour créer un faux élément d'article, et IE reconnaîtra cet élément et prendra en charge l'utilisation de CSS pour définir des styles. Ce faux élément n'a même pas besoin d'être inséré dans le DOM.
Veuillez consulter l'exemple suivant:
<! Doctype html>
<html lang = "en">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Éléments inconnus </TITME>
<style>
Article {Affichage: Block; Border: 1px Red solide}
</ style>
</TATA> </EAD>
<body>
<Re article>
<h1> Bienvenue sur le blog de Feimos </h1>
<p> c'est votre <span> pour la première fois pour visiter ce site Web. </span> </p>
</article>
</docy>
</html>
IE6 ne reconnaîtra pas les articles, il n'y aura donc pas de frontières rouges.
Mais si nous ajoutons une phrase JS à la tête, la situation sera immédiatement différente.
<script type = "text / javascript">
Document.CreateElement ("Article");
</cript>
IE6 prétend qu'il reconnaît cet élément et affiche correctement l'effet.
Nous pouvons créer une fausse copie de tous les nouveaux éléments HTML5 à la fois, nous n'avons donc pas à nous soucier des navigateurs qui ne prennent pas en charge HTML5 bien à l'avenir. Le script HTML5 d'activation de Remy Sharp nous aide à faire ces choses. L'idée de base de ce script est la suivante:
<! - [Si lt ie 9]>
<script type = "text / javascript">
var e = ("abbr, article, à part, audio, toile, datalist, détails" +
"Figure, pied de page, en-tête, hgroup, mark, menu, compteur, navigation, sortie," +
"Progress, section, temps, vidéo"). Split (',');
pour (var i = 0; i <e .length; i ++) {
document.CreateElement (e [i]);
}
</cript>
<! [endif] ->
Tout d'abord, utilisez des annotations conditionnelles pour déterminer s'il s'agit d'une version avant IE9, et si oui, exécutez JS. Écrivez d'abord toutes les nouvelles balises dans le tableau E, puis parcourez l'ensemble du tableau et créez une copie.
Le script est déjà hébergé sur Google Project Hosting, vous pouvez directement lier ce script:
<! - [Si lt ie 9]>
<script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [endif] ->
De plus, ce script doit être placé au début de la page, de préférence dans la tête, pas en bas. De cette façon, IE exécutera ce code avant d'analyser la balise de page.