Comment traitez-vous avec Internet Explorer?

Commentaires conditionnels.

<!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
  <link rel="stylesheet" href="normal.css">
<!--[endif]-->

Dans les fichiers IE, vous pouvez utiliser @import pour importer normal.css, puis remplacer les styles si nécessaire.

Tout d'abord, je n'attends pas que le projet soit terminé pour envisager la compatibilité du navigateur.

La plupart du temps, pour les problèmes CSS, Il existe des moyens de faire des choses qui ne nécessitent pas le chargement de feuilles de style spécifiques au navigateur, donc j'essaie d'utiliser ces solutions autant que possible. Par exemple - si la plupart de vos problèmes sont liés à des problèmes de modèle de boîte, des choses comme l'utilisation de divs imbriqués à la place du remplissage peuvent aider à s'assurer que tout semble correct sans avoir besoin de feuilles de style séparées et des modèles pour différents navigateurs.

Navigateur réinitialisé pour démarrer. Nivelez le terrain de jeu autant que possible et éliminez les paramètres par défaut du navigateur. Construisez votre CSS à partir de zéro. (Voir: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/)

Testez tôt et souvent sur tous les principaux navigateurs pendant le développement.

Essayez d'accomplir autant que possible sans piratages spécifiques au navigateur. Parfois, vous devrez travailler dans un CSS spécifique au navigateur, mais il devrait valider(utilisez L'outil de Validation W3C). Parfois, il n'y a rien d'autre qu'un conditionnel (et peut-être même du JavaScript), par exemple un correctif pour les png transparents dans IE6 (voir: http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/).

Si vous ne pouvez pas exécuter IE sur l'une de vos machines de développement, essayez http://browsershots.org . au moins, vous pouvez obtenir des commentaires de cette façon.

Utiliser un débogage.css qui met en évidence ou décrit divs et d'autres éléments. Jetez ceci dans votre HTML tête si nécessaire pendant le développement. Cela peut être d'une grande aide.

Utilisez "developer toolbars" si disponible (IE, Firefox).

Attendez-vous à ce que IE soit une douleur, et testez en 6, 7 et 8.

Amusez-vous!

Voici comment j'essaie de réduire la douleur de traiter avec IE:

1. Utilisez une réinitialisation.css - Yahoo! YUI Reset ou Eric Meyer Reset CSS
2. Soyez prudent avec les flotteurs, les effaces-ils causent généralement beaucoup de malédictions.
3. Soyez conscient des bogues hasLayout dans IE, en ajoutant généralement un zoom: 1 ou des attributs de hauteur aide à résoudre ce problème. Lire Sur Avoir La Mise En Page .
4. Obtenir la mise en page de travail dans Firefox, Safari, Chrome, etc tout en gardant IE environ 80% du chemin y.
5. implémenter un IE6.style css et un IE7.style css si nécessaire en utilisant des commentaires conditionnels.
6. bière, liqueur ou autres boissons pour adultes.

Tout d'abord, lisez Sur avoir Layout, ce qui explique comment le moteur de rendu IE fonctionne en interne. Le moteur de rendu D'IE est d'avant CSS. Il ne fait pas correctement la distinction entre les éléments en ligne et les éléments de bloc comme vous pouvez vous y attendre. Au lieu de cela, dans IE un élément hasLayout. Ou pas. C'est la source de 99% des bogues IE CSS. Alors, lisez cet article plusieurs fois.

En ce qui concerne les correctifs, j'utilise généralement des commentaires conditionnels. Plusieurs raisons:

• ils sont à l'épreuve du futur, par opposition à CSS hack. Que faire si IE9 corrige le hack mais pas le bug que vous utilisez pour résoudre?
• c'est valide (X) HTML (les commentaires conditionnels ne sont que des commentaires simples pour tout le Monde)
• il ne nécessite pas javascript. Vous seriez étonné de voir combien de personnes ont javascript désactivé.

Une remarque sur les commentaires conditionnels: N'utilisez jamais une correspondance ouverte. C'est, jamais faire quelque chose comme:

<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->

La raison en est la même que les hacks: faites-en une preuve future. Que faire si la prochaine version de IE corrige le bug et vous n'avez plus besoin des correctifs? Ou pire, le "correctif" gâche maintenant votre mise en page dans la nouvelle version D'IE? Il est généralement préférable de supposer que la prochaine version D'IE a corrigé le bug que vous travaillez. J'ai écrit un peu à ce sujet quand IE 8 était à l'horizon.

Je pense qu'il serait correct d'écrire un fichier CSS spécifique pour IE. Je sais que c'est une douleur, mais en raison de certains problèmes de possitioning, IE6 semble différent de tous les autres navigateurs.

Utilisez cette ligne pour votre nouveau fichier css:

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]--> 

Avec c'est-à-dire obtenir environ 65% du trafic, Je ne pense pas que vous pouvez le considérer comme une réflexion après coup.

Globalement, j'essaie de faire autant que possible sans créer un fichier CSS séparé pour IE. Je vais utiliser le formatage conditionnel come pour le cibler spécifiquement si nécessaire. Dans l'ensemble cependant, au plus vous pourriez avoir besoin de faire une feuille de style IE seulement pour le faire fonctionner.

Assurez-vous simplement que vous testez avec les versions appropriées D'IE pour votre public, car IE 6, 7 et 8 sont assez sommon.

En dernier recours, lorsque peaufiner le CSS ne résoudra tout simplement pas les choses, j'aime utiliser le scriptsélecteur CSS de Rafael Lima . Bien que cela dépend de JavaScript (la plupart des sites que je construis le font de toute façon), il fournit un moyen pratique de modifier CSS pour différents navigateurs et versions sans feuilles de style séparées.

, Vous pouvez avoir :

.someClass {
  margin-left:1px
}

.ie6.someclass {
  margin-left:2px
}

<script>
  if (internetExplorer) {
    window.location = "http://getfirefox.com";
 }
 </script>

Gardez le balisage aussi simple que possible. Faites de petits changements. Testez chaque changement.

Je le supprime

Je pense que le développement d'un nouveau fichier CSS pour une utilisation dans IE serait considérablement plus facile que de réécrire votre application, mais je ne sais pas quelle échelle et quelle portée votre application a qui rendrait même cela une option considérable. Je suppose que cela peut dépendre des versions de IE que vous cherchez à soutenir.

Nous sommes à un point maintenant que la plupart des utilisateurs devraient avoir complètement migré loin de IE6. IE7 est toujours un problème, mais loin d'être aussi mauvais que 6 était. Avec mes projets, la la configuration par défaut que je vends est la compatibilité IE7 avec le code pour diriger les utilisateurs D'IE6 et ci-dessous pour mettre à niveau. Si un client veut que j'incorpore la compatibilité IE6 dans un site, j'augmente généralement le prix indiqué de 50% en raison de la façon dont un mal de tête est terrible pour soutenir le navigateur et combien de code visuel supplémentaire doit être écrit pour le faire fonctionner.

Je sais que cela peut tomber dans la catégorie "trop peu, trop tard". Cela dit, je voudrais investir dans VMware ou Parallels et créer une machine virtuelle Windows w / IE6.

Au fur et à mesure que vous développez, vous devez vérifier progressivement votre progression dans les navigateurs qui vous intéressent.

Cela dit, avec une application existante, je voudrais d'abord m'assurer que mon HTML était valide (il y a une variété de services de validation à votre disposition) puis, en fonction de la mise en page, j'ai essayé section par section pour obtenir la bonne mise en page, utilisez les commentaires pour "masquer" les sections sur lesquelles vous ne travaillez pas activement.

Je fais habituellement tout ce que je peux pour éviter d'avoir à créer un fichier CSS séparé. Il y a beaucoup de trucs et astuces CSS & HTML là-bas qui devraient vous permettre de le faire fonctionner dans IE6 & up, ainsi que tous les autres navigateurs courants. Il faut juste du temps pour tout comprendre. Malheureusement, parfois avec des mises en page compliquées, cela peut prendre beaucoup de temps, surtout lorsque vous ne le testez pas au fur et à mesure.

Je laisse les autres résoudre les problèmes pour moi. J'utilise les excellents fichiers CSS de Yahoo inclus dans leur bibliothèque YUI. Ils ont un fichier pour supprimer le formatage existant pour les étiquettes existantes (par exemple, H1 dans IE ne ressemble pas à h1 dans Firefox), ils en ont un autre pour me donner un ensemble de formatage par défaut qui se ressemble à travers les navigateurs, ils en ont encore un autre pour standardiser les tailles de police, et le plus important Cela me donne la possibilité de construire un formatage hiérarchique de régions et sous-régions sur la page très rapidement et facilement et je sais que cela fonctionnera sur n'importe quel navigateur moderne majeur (Yahoo teste le diable pour s'assurer qu'il le fait).

Ce n'est peut-être pas la solution parfaite, mais elle a été plus que suffisante pour mes besoins.

J'ai eu le même problème dans mon dev: IE6, FFetc + LAMP + MVC personnalisé, basé sur L'article de Rasmus Lerdorf quand il a suggéré noMVC - un peu comme le gérer en utilisant includes pour les en-têtes, les pieds de page et le tri. J'ai codé CSS, je suis resté coincé avec FF ne le rendant pas bien. J'ai dû aller réviser mes connaissances CSS-j'ai trouvé qu'une seule implémentation CSS peut rendre correctement dans std. mode conforme (FF) et IE6. J'ai aimé ça. J'étais heureux de gérer les changements en utilisant un seul fichier CSS. Mon conseils:

1. je sais que vous avez un Mac, allez dans la vente de garage (les journaux vous diront où ils sont), obtenez un vieux PC pour 10 $(jusqu'à présent, j'en ai trouvé beaucoup). Cela vous donnera l'occasion de tester IE6 tôt, pendant que vous y êtes, obtenez également un commutateur KVM pour accéder à la machine lorsque vous en avez besoin.
2. l'une des choses auxquelles je suis devenu accro est le réglage D'IE6-désactiver tous les scripts ActiveX-rend la navigation sur le web sans publicité une explosion, de toute façon-testez votre application avec et sans activeX paramètres, et voir comment votre site fait. Cela m'a littéralement sauvé des heures de moments "douloureux" que les gens au-dessus de moi ont mentionnés auparavant.
3. vous savez comment tester FF / Opera / Safari avec & sans script
4. Enfin-indépendamment de la lourdeur de Javascripting que votre site utilise, assurez-vous sans Scripter les fonctionnalités de base (que je suis sûr que vous avez beaucoup de) charger correctement.

Je ne suis pas un expert, mais j'espère que mes commentaires vous aideront un peu.

Joyeux-O

Je m'assure que mes sites Web fonctionnent nativement et parfaitement dans ie9, et fonctionnent dans ie8(éventuellement avec des fonctionnalités manquantes). Je demande à tous ceux qui utilisent une version plus ancienne d'obtenir un cadre chrome. Je ne perds jamais mon temps pour ie7 et plus, car l'utilisation d'un navigateur de 6 ans est pathétique et ne devrait pas être encouragée.

Comme l'a dit nosredna, utilisez un doctype valide (voir http://www.alistapart.com/articles/doctype/) Ensuite, vérifiez votre site web dans le validateur w3c ( http://validator.w3.org/). s'il ne montre aucune erreur (ou seulement quelques-unes), alors IE devrait le rendre correctement.

Je ne mettrais pas beaucoup d'efforts pour le rendre compatible avec IE6, et j'accepterais simplement le fait qu'un site web peut être différent dans différents navigateurs.