Maison > Article > interface Web > Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

黄舟original: 2017-03-31 13:34:322171parcourir

HTML5Bien que les nouvelles balises sémantiques présentent de nombreux avantages, il existe toujours des problèmes de compatibilité dans les versions inférieures de l'ancien navigateur IE, ce qui donne souvent mal à la tête aux gens. de nouvelles balises ou utiliser un grand nombre de balises DIV traditionnelles dénuées de sens ? Aujourd'hui, nous examinerons brièvement la compatibilité des nouvelles balises H5.

Regardons d'abord un court morceau de code simple :

Code HTML :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
 
    <style>
        header, footer{width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

Navigateur Google :

Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

Sous le navigateur IE6 :

Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

Évidemment, l'en-tête et le pied de page sont affichés sous forme d'éléments de niveau bloc dans les navigateurs prenant en charge la nouvelle balise H5, alors que dans IE8 et versions antérieures Il est rendu sous forme de texte dans le navigateur et le style ne fonctionne pas, indiquant qu'il n'est pas pris en charge. Comment le résoudre ?

Tout d'abord, la première méthode consiste à utiliser l'opération DOM pour ajouter ces balises Comme le navigateur ne le prend pas en charge, je vais en créer une moi-même :

HTML. code :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script>
        document.createElement(&#39;header&#39;);
        document.createElement(&#39;footer&#39;);
    </script>
    <style>
        header, footer{display: block; width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

En ce moment, jetons un coup d'œil à l'effet d'affichage du navigateur IE6 :

Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

La couleur de fond rouge peut être affichée, indiquant que via le document La méthode .createElement() est réalisable, alors pourquoi la largeur et la hauteur du style ne fonctionnent-elles pas ? Étant donné que l'élément ajouté est un élément en ligne, les éléments en ligne n'ont ni largeur ni hauteur. Après avoir compris cela, nous ajoutons un "display: block;" à l'attribut d'en-tête et de pied de page et voyez comment l'effet change.

<style>
    header, footer{display: block; 
                   width:50px; height: 50px; 
                   background-color: #f00;}
</style>

L'effet affiché par le navigateur IE6 :

Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

L'effet affiché maintenant est exactement le même que ce dont nous avons besoin, c'est-à-dire via Cette méthode peut résoudre le problème de compatibilité des nouvelles balises H5 dans les anciens navigateurs IE. Cependant, une autre question est la suivante : s’il y a autant de nouvelles étiquettes, serait-ce trop gênant si chacune d’entre elles devait être produite selon cette méthode ?

Donc, nous introduisons maintenant la deuxième méthode, en empruntant directement la bibliothèque js packagée par Daniel senior --- html5shiv.js

Code HTML :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script src="js/html5shiv.js"></script>
 
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="js/jquery-1.11.0.min.js"></script>
 
<script>
    $(&#39;#header&#39;).css(&#39;color&#39;,&#39;#f00&#39;);
    $(&#39;#footer&#39;).css({&#39;width&#39;:&#39;100px&#39;,&#39;height&#39;:&#39;100px&#39;,
                      &#39;border&#39;:&#39;1px solid #ddd&#39;,
                      &#39;backgroundColor&#39;:&#39;#f00&#39;});
    $(&#39;#header&#39;).html(&#39;我是一只小小鸟&#39;);
</script>
 
</body>
</html>

Ensuite, nous peut ouvrir directement le navigateur IE6 pour voir l'effet :

Introduction détaillée au traitement de compatibilité des nouvelles balises HTML5 (image)

Il peut complètement obtenir l'effet souhaité, et l'opération est plus simple et la quantité de code est moindre. aussi bien faites-le Testez-le également dans les navigateurs IE7 et IE8.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage de code d'implémentation du masque personnalisé HTML5Article suivant：Partage de code d'implémentation du masque personnalisé HTML5

Articles Liés

Voir plus