Maison  >  Article  >  interface Web  >  HTML5 Shiv résout parfaitement le problème selon lequel IE (IE6/IE7/IE8) n'est pas compatible avec les compétences HTML5 tags_javascript

HTML5 Shiv résout parfaitement le problème selon lequel IE (IE6/IE7/IE8) n'est pas compatible avec les compétences HTML5 tags_javascript

WBOY
WBOYoriginal
2016-05-16 15:29:481576parcourir

Les balises et attributs sémantiques de HTML5 permettent aux développeurs de mettre en œuvre facilement des mises en page Web claires. Couplés au rendu des effets CSS3, il est très simple de créer rapidement des pages Web riches et flexibles.

Les nouveaux éléments de balise HTML5 sont :

1aa9e5d373740b65a0cc8f0a02150c53Définir l'en-tête de la page ou de la section
c37f8231a37e88427e62669260f0074dDéfinir le pied de page de la page ou de la section
c787b9a589a3ece771e842a6176cf8e9Définir la zone de navigation d'une page ou d'une section
2f8332c8dcfd5c7dec030a070bf652c3 Une zone logique ou une combinaison de contenu sur une page
23c3de37f2f9ebcb477c4a90aac6fffdDéfinir un texte ou un contenu complet
b382b004083b33e70cfb5103d2b97270Définir le contenu supplémentaire ou connexe ;




Leur utilisation peut rendre la sémantique du code plus intuitive et faciliter l’optimisation du référencement. Cependant, cette nouvelle balise HTML5 n'est pas reconnue sur IE6/IE7/IE8 et nécessite un traitement JavaScript. Voici quelques façons.
Méthode 1 : Codage JavaScript

<!--[if lt IE9]> 
<script> 
  (function() {
   if (! 
   /*@cc_on!@*/
   0) return;
   var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
   var i= e.length;
   while (i--){
     document.createElement(e[i])
   } 
})() 
</script>
<![endif]-->

S'il s'agit d'un navigateur IE inférieur à IE9, il créera une balise HTML5, de sorte que les navigateurs non IE ignoreront ce code et qu'il n'y aura pas de requêtes http inutiles.

Deuxième méthode : utilisez le package html5shiv de Google (recommandé)

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

En raison de la carte d'accès au serveur Google national, il est recommandé d'appeler le cdn national

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Mais quelle que soit la méthode ci-dessus utilisée, le CSS de la nouvelle balise doit être initialisé. Étant donné que HTML5 se comporte par défaut comme des éléments en ligne, pour mettre en page ces éléments, nous devons utiliser CSS pour les convertir manuellement en éléments de bloc. disposition pratique

Copier le code Le code est le suivant :

/*html5*/
article, à part, boîte de dialogue, pied de page, en-tête, section, pied de page, navigation, figure, menu {affichage: bloc}

Mais si les utilisateurs d'IE6/7/8 désactivent les scripts, cela deviendra une page Web de « tableau blanc » sans style. Comment devrions-nous le résoudre ?

On peut suivre l'approche de Facebook, qui consiste à guider les utilisateurs pour accéder à la page "/?_fb_noscript=1" avec le logo noscript, et remplacer les balises html5 par des balises html4. C'est plus facile que d'écrire beaucoup de hacks à maintenir. compatibilité.

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/&#63;noscript=1">继续访问</a>.
   </div>
</noscript>
<![endif]-->

Cela peut guider l'utilisateur pour ouvrir le script ou accéder directement à l'interface de conception de balises HTML4.

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