Problèmes de compatibilité du navigateur avec HTML5 et CSS3-tutoriel HTML-php.cn

HTML5 et CSS3 sont de nouveaux attributs très faciles à utiliser et puissants. Le seul défaut majeur est que de nombreux navigateurs plus anciens peuvent ne pas être compatibles. Aujourd'hui, je vais partager avec vous le problème de la compatibilité des anciens navigateurs avec HTML5 et CSS3.

1. Laissez les anciens navigateurs prendre en charge HTML5

HTML5 peut faire beaucoup pour nous, le plus délicieux est l'application de balises sémantiques Si vous utilisez déjà Chrome ou d'autres navigateurs prenant en charge HTML5. vous avez utilisé ses fonctionnalités géniales sur le navigateur, alors cet article doit vous être utile, car vous pouvez désormais é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 de Google ci-dessous. Je n'entrerai pas dans les avantages :

JavaScript Copier le contenu du code dans le presse-papiers

1. 2. https:// html5shiv.googlecode.com/svn/trunk/html5.js”> 3.< copiera 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é à d'autres emplacements, sinon il sera invalide)

Laissez principalement ces balises html5 En morceaux, comme p. Bon, restons simple, en une phrase : citez html5.js pour rendre les balises html5 en bloc

La deuxième méthode : Codage JavaScript

Le code JavaScript copie le contenu dans le presse-papiers

Le code JavaScript copie le contenu dans le presse-papiers 1. 2. 3. (function() { 4. if (! 5. /*@cc_on!@*/ 6. 0) return; 7. 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(', '); 8. var i= e.length; 9. while (i--){ 10. document.createElement(e[i]) 11. } 12.})() 13. 14. Copier après la connexion 🎜>

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, nous devons mettre en page ces éléments. Utilisez CSS pour les convertir manuellement en éléments de bloc pour une mise en page facile

Code XML/HTML copier le contenu dans le presse-papiers

1./*html5*/

2.article, apart,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Mais si les utilisateurs d'IE6/7/8 désactivent les scripts, cela deviendra un "tableau blanc" sans style "Web page, comment devons-nous 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 remplacer la balise html5 par la balise html4. C'est mieux que C'est plus facile d'écrire beaucoup de hacks pour maintenir la compatibilité. 1. 2. 3. .html5-wrappers{display:none!important;} 4. 您的浏览器禁用了脚本，请 查看这里 来启用脚本!或者 继续访问 . 5.

6. 7. Copier après la connexion Le code XML/HTML copie le contenu dans le presse-papiers

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, 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. 1.background-color:green; 2.opacity: .4; 3.filter:progid:DXImageTransform.Microsoft.alpha(opacity=40); Copier après la connexion Le code CSS copie le contenu dans le presse-papiers

Voici la zone semi-transparente opacité : .4;

filter:alpha( opacity=40 ); coin arrondi de rayon de bordure/ombre de boîte d'ombre/ombre de texte d'ombre de texte

Dans IE, vous pouvez utiliser le langage de balisage vectoriel (VML) et javascript pour obtenir ces effets , voir IE- CSS3, après avoir référencé un fichier HTC, ces trois propriétés CSS3 peuvent être utilisées dans le navigateur IE

. 1.-moz-border-radius: 15px; /* Firefox */ 2.-webkit-border-radius: 15px; /* Safari 、Chrome */ 3.border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/ 4.-moz-box-shadow: 5px 5px 5px #000; /* Firefox */ 5.-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */ 6.box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */ 7.behavior: url(ie-css3.htc); /*引用ie-css3.htc */ Copier après la connexion Le code CSS copie le contenu dans le presse-papiers

En fait, IE a ses propres filtres pour obtenir des effets d'ombre et d'ombre portée l'ombre produira un effet continu, ombre dégradée

1.filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10); Copier après la connexion Le code CSS copie le contenu dans le presse-papiers

Le code CSS copie le contenu dans le presse-papiers

1.filter:progid:DXImageTransform.Microsoft.DropShadow( Color="#6699CC",OffX="5",OffY="5",Positive="1"); Le filtre semble être le même que celui existant. Le script HTC a un conflit, ou cela peut être appelé 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

Je crois qu'après avoir lu ces lignes Dans certains cas, vous maîtrisez les méthodes. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois ! Lecture connexe :

Étapes de mise en œuvre de l'utilisation de Js pour faire fonctionner les cookies HTTP

Introduction détaillée au modèle objet de nomenclature d'exploitation Js

Quelle est la différence entre div et span dans la mise en page d'une page Web HTML