web-dev-qa-db-fra.com

HTML5 et CSS3 pour IE7 et IE8

J'ai hérité d'une application Web où le serveur frontal utilise de nouvelles balises HTML5 (balises header, nav, section) et de nouveaux attributs de style CSS3 (bordures arrondies). Le site Web est incroyable dans Google Chrome et Safari.

Cependant, le client se plaint maintenant que le site Web est cassé pour IE7 et IE8. Tout est mal aligné et la plupart des styles ne sont pas rendus.

Quel est le moyen le plus simple de faire fonctionner ce site Web dans IE7 et IE8? Dois-je: A) appliquer quelques astuces pour que les navigateurs IE acceptent les nouvelles fonctionnalités HTML5 et CSS3? B) une réécriture complète du frontal?

html5internet-explorer-8internet-explorer-7css3
17
John

Essayez ce joli script (.js) :)
Et pour les coins arrondis, j’utilise un autre script (.htc)

utilisez le 1er:

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

utiliser le 2ème comme:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Bonne construction du site :)

Le lien d'origine n'est plus actif et HTML5shiv a été déplacé.

Maintenant disponible sur GitHub

https://github.com/aFarkas/html5shiv

27
Répás

Pour HTML5, je recommande HTML5 Shim de Remy Sharp , bien que pour voir l'effet, vos utilisateurs IE devront activer JavaScript. Fondamentalement, il exploite une erreur dans IE6/7/8 qui permet aux éléments HTML5 d'être reconnus après leur création en JavaScript à l'aide de la fonction document.createElement.

Pour votre CSS, il existe quelques hacks différents tels que CSS3 PIE qui utilisent la propriété "behavior" (unique à IE) pour simuler les effets CSS3. Personnellement, je m'en suis abstenu, car, selon mon expérience, ils se cassent très facilement et finissent par être plus compliqués qu'ils ne valent. J'ai plutôt tendance à écrire mon CSS de manière à ce qu'il se dégrade gracieusement dans IE, de sorte que les boutons arrondis aient une apparence carrée, tout en restant agréables.

5
Karl Nicoll

Vous pouvez essayer css3pie http://css3pie.com/ qui pourrait vous aider à résoudre les problèmes liés à css3.

2
Alistair Laing

modernizr http://modernizr.com/ sera un bon choix.

2
Alex G

Pour ajouter à Karl et Alistair, j'ai rencontré un problème avec CSS3Pie sur mon site. J'ai utilisé leur code CSS d'il y a quatre mois et les gradients CSS3 bloquaient l'affichage des champs <input type="text"/> dans IE7 ou IE8. Ce n'est que lorsque j'ai revisité leur site et vu leur nouveau code CSS que cela a fonctionné. 

Leçon est toujours vérifier les sites Web des plugins pour le code le plus récent

1
Danger14

Quelles que soient les nouvelles balises sémantiques, si vous souhaitez produire l'effet CSS3 dans IE7/8, vous pouvez certainement utiliser les classes graphiques asp.Net comme solution de secours pour IE7/8. certains des effets qui peuvent être créés en utilisant des graphiques .net sont -

Bordure-rayon, dégradé linéaire, dégradé radial, ombrage de la boîte, etc.

Vous pouvez créer ces effets dans une page asp.net à l'aide de classes graphiques et rendre cette page en tant qu'image d'arrière-plan de tout élément HTML. c'est à dire.

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div>

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" />

où les paramètres sont saisis en termes de sortie requise pour créer l'effet. c'est-à-dire hauteur, largeur, couleur, etc.

1
Umesh Chaurasiya