Maison  >  Article  >  interface Web  >  HTML5 Shiv--Comment résoudre l'incompatibilité d'IE (IE6/IE7/IE8) avec les balises HTML5

HTML5 Shiv--Comment résoudre l'incompatibilité d'IE (IE6/IE7/IE8) avec les balises HTML5

高洛峰
高洛峰original
2017-02-09 14:51:331809parcourir

Les balises et attributs sémantiques de HTML5 permettent aux développeurs de mettre en œuvre facilement des mises en page Web claires. La plupart des navigateurs sont fondamentalement compatibles avec HTML5, mais actuellement ie6/ie7/ie8 ne sont pas compatibles avec les balises HTML5, un traitement javascript est donc nécessaire pour les rendre compatibles

Méthode 1 : code 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(&#39;, &#39;);
    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.

Méthode 2 : utilisez le package html5shiv de Google

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

(ps : FQ est requis pour ouvrir la page Web liée. De plus, même si je FQ, lors de l'ouverture de la page Web, il affiche Non il reste aux composeurs à essayer sur le pass 0)

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]-->

Ce lien est disponible pour des tests personnels

La partie js a été écrite, mais elle l'est toujours. Il y a un petit problème. Si vous rencontrez des utilisateurs qui désactivent les scripts dans IE6/7/8, cela deviendra une page Web "tableau blanc" sans style. Comment devrions-nous le résoudre. ?

On peut se référer à l'approche de Facebook. C'est-à-dire guider l'utilisateur pour accéder à la page "/?_fb_noscript=1" avec le logo noscript et remplacer la balise html5 par la balise html4. C'est plus léger que l'écriture. beaucoup de hacks pour maintenir la compatibilité.

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?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.

La partie js est résolue, vient maintenant la partie css. Le CSS doit initialiser ces nouveaux éléments pour faciliter les réglages de mise en page

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Remarque : Une bonne mémoire n'est pas aussi bonne qu'une mauvaise écriture. Je vais résumer quelques problèmes pratiques rencontrés lors du développement et vous pourrez les lire. si vous les rencontrez à nouveau. Regardez, le contenu est relativement basique, toute similitude est purement fortuite

Pour plus de méthodes HTML5 Shiv pour résoudre les articles liés aux balises HTML5 incompatibles avec IE (IE6/IE7/IE8), veuillez payer. attention au site PHP 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:Objet de plage APIArticle suivant:Objet de plage API