Explication détaillée sur la question de compatibilité des anciens navigateurs avec HTML5 et CSS3

L'éditeur suivant vous proposera un article sur la question de la compatibilité des anciens navigateurs avec HTML5 et CSS3. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

1. Laissons les anciens navigateurs prendre en charge HTML5

HTML5 peut faire beaucoup pour nous, la chose la plus délicieuse est la sémantique Pour l'application de balises, si vous l'avez déjà utilisé sur Chrome ou sur d'autres navigateurs prenant en charge HTML5, alors cet article doit vous être utile, car désormais vous pouvez également utiliser HTML5 sur IE.
La première méthode : Utiliser le package html5shiv de Google (recommandé)

Tout d'abord, vous devez citer le fichier html5.js suivant de Google. Les avantages ne seront pas mentionnés :

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

• 
  

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

Principalement pour transformer ces balises html5 en blocs, comme p. Bon, restons simples. 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 par défaut L'expression suivante est éléments en ligne Pour mettre en page ces éléments, nous devons utiliser CSS pour les convertir manuellement en éléments de bloc pour une mise en page facile

/*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, il deviendra un "tableau blanc" sans style " page Web. Nous Comment le résoudre ?

Nous pouvons suivre l'approche de Facebook, qui consiste à guider les utilisateurs pour accéder à la page

“/?_fb_noscript=1” avec le logo noscript, et remplacez la balise html5 par la balise html4. C'est plus léger que d'écrire beaucoup de hacks pour maintenir la compatibilité.

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

• 
  

Cela peut guider l'utilisateur pour ouvrir le script, ou Accédez 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 des coins arrondis et des 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, très critiqué, est suffisamment puissant à lui seul. 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

opacity: .4;
filter:alpha(opacity=40);

coin arrondi à rayon de bordure/Ombre de boîte d'ombre de boîte/Ombre de texte d'Ombre de texte

Vector Markup Language (VML) et javascript peuvent être utilisés pour obtenir ces effets dans IE-CSS3. Après avoir référencé un fichier HTC, ces trois

propriétés CSS3 peuvent être utilisées dans le navigateur IEOui.

Code CSSCopier le contenu dans le presse-papiers

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */

En fait, IE a son propre filtre pour implémenter l'ombre) et l'ombre portée effet

l'ombre produira des ombres continues et dégradées

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

L'ombre produite par l'ombre portée n'a aucun changement de lumière et d'obscurité

filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

Le filtre semble entrer en conflit avec le script HTC existant, ou on peut l'appeler une fonctionnalité : lorsque les deux sont activés sur un élément en même temps, l'effet de filtre sera transféré à ses éléments enfants <.>

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!