Comment gérer les anciennes versions de navigateurs non compatibles avec H5 et C3

Cette fois, je vais vous expliquer comment résoudre le problème selon lequel l'ancienne version du navigateur n'est pas compatible avec H5 et C3. Comment faire en sorte que l'ancienne version du navigateur prenne en charge HTML5 ? Quelles sont les précautions pour les anciennes versions de navigateurs compatibles H5 et C3 Voici des cas concrets, regardons-y.

HTML5 peut faire beaucoup pour nous, le plus délicieux est l'application de balises sémantiques. Si vous avez utilisé ses fonctionnalités géniales sur Chrome ou d'autres navigateurs prenant en charge HTML5, alors cet article doit vous être utile. , car vous pouvez désormais également utiliser HTML5 sur IE.

Première méthode : utiliser le package html5shiv de Google (recommandé)

Tout d'abord, vous devez citer le fichier html5.js de Google ci-dessous. Je n'entrerai pas dans les avantages :

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

Copiez le code ci-dessus dans la partie head, rappelez-vous qu'il doit s'agir de la partie head (car IE doit connaître cet élément avant que l'élément ne soit analysé, donc ce fichier js ne peut pas être appelé depuis d'autres emplacements, sinon il le sera invalide)

Il s'agit principalement de transformer ces balises html5 en blocs, comme des divs. Bon, restons simple. Pour résumer en une phrase : citez html5.js pour rendre les balises html5 en bloc

La deuxième méthode : 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(&#39;, &#39;);   
     var i= e.length;   
     while (i--){   
         document.createElement(e[i])   
     }    
})()    
</script>   
<![endif]-->

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

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

Mais si les utilisateurs d'ie6/7/8 désactivent les scripts, cela devient une page Web de « tableau blanc » sans style ?

Nous. Vous pouvez suivre l'approche de Facebook, qui consiste à guider les utilisateurs vers la page "/?_fb_noscript=1" avec le logo noscript et à remplacer la balise html5 par la balise html4. C'est plus facile que d'écrire de nombreux 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.

2. Rendre les anciens navigateurs compatibles avec CSS3 (solution de compatibilité incomplète)

Depuis Internet Explorer 8, la série IE ne prend pas en charge CSS3. Pour créer certains effets couramment utilisés dans IE, tels que les coins arrondis et les ombres, vous devez utiliser des éléments et des images redondants et dénués de sens pour créer ces effets. Après en avoir eu assez, j'ai pensé à utiliser des méthodes de style CSS3 plus concises, directes et efficaces pour résoudre ces problèmes. Heureusement, même Internet Explorer, qui a été critiqué, est suffisamment puissant en soi. La technologie unique d'IE peut très bien réaliser certains effets CSS3.

Transparence de l'opacité

La transparence des éléments peut être facilement obtenue à l'aide de filtres dans IE.

background-color:green;   
opacity: .4;   
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

Zone translucide ici
opacité : .4;

filter:alpha(opacity=40);

congé de bordure-radius/Box Shadow Box Shadow /Text Shadow

Vous pouvez utiliser Vector Markup Language (VML) et javascript pour obtenir ces effets dans IE. Voir IE-CSS3 Après avoir cité un fichier HTC, parcourez dans IE Ces trois propriétés CSS3 peuvent être. utilisé dans le navigateur .

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Étapes détaillées pour créer une plateforme de gestion de livres à l'aide de vue.js

Comment compter la somme d'un tableau dans bootstrap Le nombre de

Comment implémenter vue.js todolist

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!