Comment traitez-vous avec Internet Explorer?

Question

Je suis conscient qu'il y a probablement d'autres questions à ce sujet. Je suppose que chaque développeur web passe par cette avec IE.

---

Mon problème:

Je développe une application web entièrement basé sur Javascript. Je suis un utilisateur Mac. J'ai été vraiment heureux que tout fonctionnait très bien dans Safari, Firefox et Opera. J'ai alors demandé à un ami avec Windows pour vérifier avec Internet Explorer, et les choses ne fonctionnent pas ainsi. Ma demande est très sensible aux normes HTML.

Le principal problème est la mise en forme CSS. Le JavaScript lui-même semble fonctionner correctement grâce à jQuery pour la portabilité.

---

Ma question:

Comment traitez-vous avec Internet Explorer? Dois-je créer un nouveau CSS, qui est chargé uniquement sur Internet Explorer? Dois-je créer une nouvelle version de l'application uniquement pour Internet Explorer? Comment avez-vous normalement gérer cela? L'application est assez grand à la fois en fonction de la conception et dans la mise en page de conception.

---

Edit:

À l'aide de la CSS reset comme suggéré par Nosredna, déjà supprimé près de la moitié des problèmes. Je suppose que c'est vraiment une bonne pratique. J'ai remarqué que SI l'utilise aussi.

Answer 1

Ne vous spécifiez un doctype valide? Vous pouvez obtenir d'Internet Explorer pour être un peu plus conforme par commutation dans le mode standard. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

Vous utilisez un navigateur réinitialiser le fichier CSS? Qui peut aider à rapprocher les versions ensemble. http://meyerweb.com/eric/tools/css/reset/

Être conscient de IE CSS bugs: http://www.positioniseverything.net/explorer.html

Pour le squelette de votre mise en page, pensez à utiliser le balisage qui est connue pour le travail, tels que http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts ou http://960.gs/ pour liquide ou de mises en page fixes, respectivement.

Suivre JavaScript différences entre les navigateurs. jQuery gère certains d'entre eux, mais pas tous d'entre eux. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Ouais, c'est à dire une douleur. Si vous voulez qu'il fonctionne dans internet explorer, vous voulez vraiment tester sous IE, tous les deux jours. Vous ne voulez pas enregistrer la douleur pour la fin, vous voulez gérer les cauchemars, un à la fois.

---

Par ailleurs, si vous pensez que IE est une douleur, essayez de regarder votre page avec un téléphone mobile. L'autre jour je suis allé à REI.com avec un iPhone et le milieu de la cinquième ou plus de l'écran a été repris par une bande de brouillage des marques que rendus sous forme de texte.

Answer 2

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.

Answer 3

D'abord et avant tout, je ne pas attendre jusqu'à ce que le projet est fait pour examiner la compatibilité du navigateur.

La plupart du temps pour CSS questions il y a des façons de faire des choses qui ne nécessitent pas spécifiques à un navigateur feuilles de style, à être chargé, j'ai donc essayer de l'utilisation de ces solutions dans la mesure du possible. Par exemple - si la plupart de vos questions sont liées à la zone de modéliser des problèmes, des choses comme utilisant des divs en place de rembourrage peut aider à s'assurer que tout est correct, sans la nécessité de séparer les feuilles de style et des modèles pour les différents navigateurs.

Answer 4

Navigateur reset pour démarrer. Niveau le terrain de jeu autant que possible et de faire disparaître avec le navigateur par défaut. Construire votre CSS à partir de la base. (Voir: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/)

Test trop tôt et souvent dans tous les principaux navigateurs au cours du développement.

Essayez de faire autant que possible sans navigateur spécifique hacks. Parfois, vous aurez besoin de travailler dans un navigateur spécifique, CSS, mais il faut la valider (utiliser l'outil de Validation du W3C). Parfois, il n'y a tout simplement rien pour elle, mais à une condition (et peut-être même un peu de JavaScript), par exemple, fixer pour la transparence des Png dans IE6 (Voir: http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/).

Si vous ne pouvez pas exécuter à-dire sur une de vos machines de développement, essayez http://browsershots.org. Au moins, vous pouvez obtenir de la rétroaction de cette façon.

Utiliser un outil de débogage.css qui met en valeur ou des contours de la vrd et d'autres éléments. Jeter cette dans votre code HTML tête si nécessaire au cours du développement. Cela peut être d'une grande aide.

L'utilisation de "développeur barres d'outils," le cas échéant (IE, Firefox).

S'ATTENDRE à ce QUE IE VA ÊTRE UNE DOULEUR, et TEST DANS 6, 7 et 8.

Amusez-vous!

Answer 5

Tout d'abord, lisez Sur Mise en page, qui explique comment le moteur de rendu d'IE fonctionne en interne. IE est le moteur de rendu de avant de feuille de style CSS. Il n'est pas correctement la distinction entre inline et block éléments comme vous le souhaitez. Au contraire, c'est à dire un élément de hasLayout. Ou pas. C'est à l'origine de 99% d'IE CSS bugs. Donc, lisez cet article une couple de fois.

Comme pour les corrections, j'ai l'habitude d'utiliser les commentaires conditionnels. Plusieurs raisons:

• L'avenir, ils sont la preuve, par opposition à des hacks CSS. Que faire si IE9 résout le hack mais pas le bogue que vous utilisez pour résoudre?
• Il est valide (X)HTML (les commentaires conditionnels sont tout simplement des commentaires à tout le monde)
• Il ne nécessite pas de javascript. Vous seriez étonné de voir comment beaucoup de gens ont le javascript désactivé.

Une remarque sur les commentaires conditionnels: n'utilisez Jamais une fin ouverte match. C'est, jamais faire quelque chose comme:

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

La raison est la même que hacks: le faire dans l'avenir. Si la prochaine version d'IE corrige le bug et que vous n'avez pas besoin de correctifs de plus? Ou pire, le "fix" en fait désormais les dégâts de votre mise en page dans la nouvelle version de IE? Il est généralement préférable de supposer que la prochaine version d'IE a corrigé le bug que vous travaillez autour de. J'ai écrit un peu à propos que lorsque IE 8 est sur l'horizon.