Introduction de l'article de wulin.com (www.vevb.com): Les blogs sont depuis longtemps passés à l'écriture HTML5, mais de nombreux utilisateurs n'ont pas utilisé le dernier navigateur et ont utilisé des ensembles de balises HTML4. HTML5 a de nombreuses balises sémantiques et pratiques. J'ai également commencé à essayer des balises couramment utilisées, et maintenant j'utilise des balises d'article et de temps.
HTML5 fournit aux développeurs de nombreuses nouvelles balises, telles que la section, la navigation, l'article, l'en-tête et le pied de page. Ces balises sont très sémantiques et seront utilisées fréquemment, mais elles ne peuvent pas être reconnues et utilisées normalement dans les anciens navigateurs tels que IE6, IE7, IE8 et Firefox 2.
Pourquoi les navigateurs à l'ancienne ne peuvent-ils pas reconnaître ces balises?
En fait, la faute n'est pas le navigateur, car ce type de balise n'existait pas du tout à l'ère, donc il ne peut pas être correctement identifié. Cette reconnaissance inhabituelle de balises rend la structure DOM anormale.
Nous avons le code de test comme suit. Il s'agit d'un article contenu avec le titre et les mots bleus, et le contenu de l'article est étiqueté avec l'article.
<! Doctype html><html xmlns = lang = zh-cn>
<adal>
<Meta Charset = UTF-8 />
<Title> Test </Title>
<style>
Article {couleur: # 06f;}
</ style>
</ head>
<body>
<h1> Titre de l'article </H1>
<Re article>
C'est le contenu de l'article, ce devrait être un morceau de texte bleu. Dans les anciens navigateurs, si vous ne faites pas de hacks, une exception sera affichée.
</article>
</docy>
</html>
Dans IE8, ce qui suit est affiché.
IE8 ne reconnaît pas la balise d'article, et le style CSS défini sur la balise n'a aucun effet. Dans IE8, <Reticle> est interprété comme deux éléments de balise vides nommés <Article /> et </ Article />, qui sont répertoriés comme des nœuds de frère avec le contenu de l'article, comme le montre la figure ci-dessous.
Comment utiliser des balises HTML5 dans des navigateurs à l'ancienne?
Puisqu'il ne peut pas être utilisé car il ne peut pas être reconnu, la solution consiste à faire identifier l'étiquette. Heureusement, le simple fait d'utiliser Document.CreateElement (TagName) permet au navigateur de reconnaître l'étiquette et le moteur CSS pour connaître l'existence de la balise. Supposons que la zone <ad-head> de notre exemple ci-dessus soit ajoutée avec le code suivant.
<cript>Document.CreateElement ('Article');
</cript>
L'explication DOM dans IE8 sera montrée dans la figure ci-dessous.
Naturellement, le texte apparaît également en bleu normal.
Conclusion
Le blog est passé depuis longtemps à l'écriture HTML5, mais de nombreux utilisateurs n'ont pas utilisé le dernier navigateur et ont utilisé des ensembles de balises HTML4. HTML5 a de nombreuses balises sémantiques et pratiques. J'ai également commencé à essayer des balises couramment utilisées, et maintenant j'utilise des balises d'article et de temps.