Maison > Article > interface Web > Problèmes de compatibilité du navigateur avec HTML5 et CSS3
Problèmes de compatibilité du navigateur avec HTML5 et CSS3
- php中世界最好的语言original
- 2017-12-02 13:45:232222parcourir
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.3b91107ae0f6dc60cbcc0243262d767f
2.0290c186d36e3654699c6d84bd7123a12cacc6d41bbb37262a98f745aa00fbf0
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-papiers1.<!--[if lt IE9]>
2.<script>
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.</script>
14.<![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, 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.<!--[if lte IE 8]> 2.<noscript> 3. <style>.html5-wrappers{display:none!important;}</style> 4. <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>. 5. </p> 6.</noscript> 7.<![endif]-->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);
Le code CSS copie le contenu dans le presse-papiers
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 lenavigateur 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 */
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);
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
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!