Bug de positionnement <IE8 - Pourquoi? Meilleure solution de contournement?

J'ai remarqué qu'un site que je suis en train de mettre à jour avait un petit bogue dans FF/IE8/Chrome (sur this page par exemple) - l'image en haut à gauche était un peu haute, égarée dans l'en-tête en haut. Je me demandais pourquoi je ne l'avais pas remarqué lorsque j'ai repris le site, mais je me rends compte que c'est seulement depuis que j'ai amélioré IE7 à IE8 qu'il est devenu évident - évidemment, le problème existera depuis longtemps dans 'bon' navigateurs.Bug de positionnement <IE8 - Pourquoi? Meilleure solution de contournement?

Pour ces navigateurs «appropriés», cette image positionnée de façon absolue nécessite un attribut supérieur à 59px, contrairement aux 56px requis par IE7 (et les versions inférieures).

Une solution est facile, mais a) Je veux d'abord comprendre le problème, et b) Je voudrais envisager une gamme de solutions (je sais qu'il y en aura plus d'une). Dans cet esprit ...

Quelle est la cause du problème?

Un grand nombre de problèmes de positionnement étaient dus au modèle de boîte IE erroné, mais je pensais que cela avait été corrigé par IE7. Est-ce un problème de modèle de boîte qui affecte encore IE7 ou est-ce quelque chose de différent?

Quelle est la meilleure solution?

Plusieurs sources suggèrent que l'utilisation des commentaires de l'état d'inclure un fichier CSS patch IE7 est la voie à suivre:

<!--[if lte IE 7]> 
<link href="IE7Fix.css" rel="stylesheet" type="text/css"> 
<![endif]-->

simple, mais je préfère ne pas avoir à insérer cela dans l'en-tête de chaque page sur le site (mais bien sûr je le ferai si je dois). Je sais qu'il y a de nombreux hacks CSS qui pourraient probablement faire l'affaire, mais il y a une pensée de l'école qui dit que CSS devrait être évité parce qu'ils sont plus difficiles à maintenir, surtout quand de nouveaux navigateurs émergent. Je peux certainement sympathiser avec cet état d'esprit; Cependant, ce site est entièrement réaménagé dans les 3 prochains mois, donc je suis à la recherche d'une solution à court terme. Si je devais choisir d'utiliser un hack CSS, que dois-je faire pour changer le comportement pour IE7 et ci-dessous? J'ai également lu que les bonnes feuilles de style de réinitialisation peuvent éviter beaucoup de ces problèmes, donc pour rire, j'ai appliqué la feuille de style Reset Reloaded d'Eric Meyer - comme prévu, il a bougé le site de manière significative. Donc, pour récapituler, quel est le problème exactement? quelle est la meilleure solution à long terme, et quelle solution serait la plus facile à déployer, donner la nature à court terme du problème?

CSS ('Banner02'): http://new.eminox.com/_lib.css/content.css

Source

2009-06-17 CJM

En fait, je pense que votre isnt problème avec le positionnement de 'banner02', au lieu, il est à la hauteur de div 'banner01' en haut. J'ai ouvert le site dans FF et IE7 et aligné le bord supérieur de la page. L'image "ROCK2" est exactement dans la même position de hauteur, mais l'en-tête div 'banner01' était plus haut dans un navigateur que dans l'autre. Je pense aussi que IE7 fonctionnait en mode 'quirks' qui changeait légèrement le modèle de boîte.

Pour faire FF et IE7 ont le même aspect (désolé, je n'avez pas installé IE8, et ceci est mon PC de travail, donc je ne peux pas installer beaucoup de les vérifier tous), j'ai fait 2 changements:

1) ~~changer le DOCTYPE de:~~ < - ce n'est probablement pas nécessaire. voir mon commentaire ci-dessous.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

à:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) définissent une hauteur pour 'banner01', parce qu'aucune a été précédemment défini (en global.css):

.banner01 { 
    width: 770px; 
    height: 48px; 
    background-color: white; 
    border-color: #555555; 
    border-style: solid; 
    border-width: 10px 0 1px 0; 
}

(bannière 02 est à 59px, donc nous choisissons une hauteur de 48 car 48 + 10px bordure supérieure + 1px bordure inférieure = 59px)

Je l'ai fait pour moi ... mais encore une fois, je l'ai seulement testé dans 2 navigateurs. J'espère que cela aide!

Source

2009-06-17 13:55:48 CodingWithSpike

Je suis retourné et j'ai regardé le DOCTYPE et l'ai remis à ce que vous aviez à l'origine, et banner01 et 02 sont toujours alignés, donc je pense que vous pouvez ignorer mon # 1 ci-dessus. Pardon! Je suppose que cela dépend de ce que IE8 aime ... – CodingWithSpike

Techniquement cette page n'est pas codée correctement puisque le doctype dit HTML et le code XHTML. En pratique, cela n'a pas beaucoup d'importance car les navigateurs utilisent des analyseurs de balises. –

Du côté positif, votre suggestion rend bien dans IE7/8/Chrome2/FF3.5. Alors, comment définir explicitement la hauteur de banner01 a fait une telle différence? J'aurais (bêtement) attendu que les deux aient la même hauteur si je rendais le même contenu. – CJM

Bug de positionnement <IE8 - Pourquoi? Meilleure solution de contournement?

Répondre

Questions connexes