Plusieurs solutions pour résoudre le problème de ne pas prendre en charge les balises HTML5 compatibles avec IE6 / 7/8

Auteur：Eve Cole Date de mise à jour：2025-04-03 20:00:04

HTML5 / "> L'époque de HTML5 est populaire est arrivée. Si vous attendez toujours la compatibilité du navigateur, cela signifie que vous êtes déconnecté du Web. Bien sûr, cela est dû au développement en plein essor des clients mobiles. Si vous vous débattez toujours, si vous devez maîtriser le HTML5 et le Spring sur le printemps. Ne le croyez pas, je peux seulement dire: croyez-le ou non!

Jetons un coup d'œil à une structure de balise HTML5 standard: (Je parle juste des balises ici, et rien d'autre n'est impliqué)

<! Doctype html>

<html>

<adal>

</ head>

<body>

<dique>

</-header>

</ section>

</article>

</docy>

</html>

L'avancement de la balise HTML5 est bien sûr parce que sa sémantique est plus intuitive. Bien sûr, ce n'est qu'un des conseils de la progression de HTML5. Certaines personnes suggèrent cela: ne dites pas que les progrès de HTML5 sont révolutionnaires, mais développemental! Je ne m'oppose pas à cette déclaration, mais elle est en effet révolutionnaire à certains égards. Je ne veux pas sortir du sujet ici, nous ne parlons que des étiquettes.

Bien sûr, lorsqu'il est enthousiasmé par une telle étiquette sémantique aussi merveilleuse, je dois non seulement demander: IE le soutient-il? Malheureusement, la réponse est non. Si vous avez déjà peur par IE, vous devez continuer à supporter sa torture sans fin. (IE9 et IE10 sont déjà compatibles et prennent en charge HTML5 et CSS3 / "> CSS3.0)

Mais vous devez être heureux qu'il y ait de nombreux génies dans cette époque dans lesquels vous vivez. Quelqu'un vous a aidé à résoudre ce problème! Cependant, il ne peut pas être appelé parfait!

Jetons un coup d'œil à plusieurs solutions pour résoudre le problème de ne pas prendre en charge les balises HTML5 qui sont compatibles avec IE6 / 7/8:

1. JavaScript: document.CreateEleenment (......)

Une partie de la raison pour laquelle IE6 / 7/8 n'est pas prise en charge est qu'ils ne considèrent pas le pied de page comme une balise HTML valide. Alors, n'en ferons-nous pas simplement une étiquette? La manière la plus directe est bien sûr de créer JavaScript: document.CreateEleenment (......)!

(fonction(){

var element = ['en-tête', 'footer', 'article', 'Moins', 'section', 'nav', 'menu', 'hgroup', 'detail', 'dialog', 'Figure', 'figcaption'],

Len = élément.length;

while (len -) {

document.CreateElement (élément [i])

}

}) ();

Il s'agit simplement de créer quelques balises HTML5 typiques afin qu'ils puissent devenir des balises dans IE6 / 7/8.

Quelqu'un a écrit un fichier JS complet, il vous suffit de le présenter, comme ceci:

<! - [Si lt ie 9]>

<! [endif] -> Il y a aussi une écriture

<! - [Si LTE IE 9]>

<! [endif] -> La seule différence entre HTML5SHIV et HTML5SHIM est M et V, et il n'y a pas d'autre différence! Bien sûr, ce n'est pas ce que j'ai dit. Le texte d'origine est: ... la seule différence est que l'on a un M et un a av - c'est tout.

Ici, nous voulons faire une note spéciale: c'est-à-dire le jugement annotation unique d'IE:

LTE: est l'abréviation de moins ou égale à, ce qui signifie inférieur ou égal à.

LT: est l'abréviation de moins que, ce qui signifie moins que.

GTE: est l'abréviation de plus ou égale à, ce qui signifie supérieur ou égal à.

GT: est l'abréviation de plus grande que, ce qui signifie supérieur à.

! : Cela signifie pas égal, le même que le symbole de jugement non égal en javascript

Bien que IE9 prenne en charge les balises HTML5, le support n'est pas très complet, vous pouvez également écrire LTE, qui dépend de votre choix!

Bien sûr, n'oubliez pas de spécifier la propriété d'affichage de la balise nouvellement créée. Dans la plupart des cas, je veux que la balise soit bloquée:

En-tête, pied de page, article, à part, section, navigation, menu, hgroup, détails, boîte de dialogue, figure, figure {affichage: bloc}

2. Méthodes de nidification des étiquettes

En fait, pour le dire franchement, c'est parce que les balises HTML5 sémantiques nid divs et autres balises disponibles, puis n'écrivez que des styles pour div. Je ne suis pas d'accord avec cette méthode d'écriture. C'est mieux que de le faire, donnez à l'étiquette une pièce d'identité ou une classe sémantique!

<! - [Si lt ie 9]>

<style>

corps> * .Section {

Couleur: # FF0;

}

</ style>

<! [endif] ->

<style>

Section .Section {couleur: # f00;

}

</ style>

<Acction> <div> Test de contenu ... </div> </ section>

Mais s'il est similaire à cette structure, il n'est pas sûr à utiliser :

<Nav>

<ul>

</ul>

</ nav>

3. IE Commentaires conditionnels

<! - [Si lt ie 9]> <div> <! [endif] ->

<! - [Si c'est-à-dire 9]> <section> <! [endif] ->

<! - [If! IE]> <! -> <Action> <! - <! [endif] ->

......

<! - [Si lt ie 9]> </div> <! [endif] ->

<! - [Si c'est-à-dire 9]> </ section> <! [endif] ->

<! - [If! IE]> <! -> </ section> <! - <! [endif] ->

Regardez à nouveau le jugement de commentaire unique de l'IE:

LTE: est l'abréviation de moins ou égale à, ce qui signifie inférieur ou égal à.

LT: est l'abréviation de moins que, ce qui signifie moins que.

GTE: est l'abréviation de plus ou égale à, ce qui signifie supérieur ou égal à.

GT: est l'abréviation de plus grande que, ce qui signifie supérieur à.

! : Cela signifie pas égal, le même que le symbole de jugement non égal en javascript

Je crois que tout le monde comprend ce qui se passe! C'est une manière plus douloureuse! Une grande quantité de code HTML rend le code qui voulait à l'origine être sémanrisé encore plus déroutant. Et il n'est pas propice aux styles d'écriture.

4. Utilisez des XMLN pour définir l'espace de vie du document

XMLNS est l'abréviation de l'espace de noms XHTML, qui est le soi-disant espace de noms. Comme la déclaration Doctype, XMLNS est également une déclaration. Contrairement à la déclaration Doctype existe toujours dans les documents HTML, XMLN n'existe pas dans les documents HTML. Les XMLN que nous voyons habituellement apparaissent dans les documents XHTML.

<html xmlns = http: //www.w3.org/1999/xhtml lang = en> Il s'agit de l'espace de noms d'origine de xhtml, qui a été simplifié après HTML5.

<html lang = en> La méthode des journaux Elco Klingen a attiré une attention généralisée au début. Cette technique contient un espace de noms XML et utilise des éléments avec un préfixe d'espace de noms, tels que:

<! Doctype html>

<body>

<html5: section>

<! - Contenu ->

</ html5: section>

</docy>

</html>

Le préfixe de: HTML5 n'est pas un moyen d'écriture standard, vous pouvez également utiliser d'autres caractères à la place: HL5 est également OK. Avec le préfixe, IE reconnaît de nouveaux éléments, permettant d'appliquer des styles. Cela fonctionne aussi bien dans d'autres navigateurs, donc en fin de compte, vous construisez avec succès les mêmes éléments et le même style dans chaque navigateur.

Cette méthode a une faille claire: vous devez utiliser un espace de noms format XML dans des documents HTML, et vous devez également le faire dans CSS:

Html5 /: Section {

Affichage: bloc;

}

Alors, comment est la compatibilité avec JS? Voici un test Deml

<! Doctype html>

<adal>

<style>

HTML5 /: Section {affichage: bloc; Largeur: 100px; hauteur: 50px; Contexte: # F00; Border: 1px bleu massif; Couleur: # FF0; }

</ style>

<cript>

window.onload = function () {

alert (document.getElementById ("test"). InnerHtml + "--- id")

alert (document.getElementsByTagName ("Section") [0] .InnerHtml + "--- Tagname")

alert (document.getElementsByTagName ("Section") [0] .InnerHtml + "--- Uppercase")

}

</cript>

</ head>

<body>

<html5: section id = "test"> contenu </ html5: section>

</docy>

</html>

Les résultats des tests ont été testés par IE6 / 7/8, mais seuls les ID peuvent être obtenus dans FixFox et Chrome, donc cette méthode n'est pas une méthode acceptable!