Problème CSS pour IE8 exécutant le mode Quirks

Il y a un rembourrage mystérieux entre deux images en cours d'exécution dans IE8 et le mode Quirks. Ces deux images agissent comme un logo pour mon site Web éventuel. J'ai isolé le problème dans un seul fichier html, http://etcbc.org/ie_problem/ie.html.Problème CSS pour IE8 exécutant le mode Quirks

Il est supposé dire "east toronto baptist church". Comme vous pouvez le voir, il y a actuellement un espace entre "toro" "nto". Qu'est-ce qui cause cet espace dans IE8 et qui fonctionne en mode Quirks?

Source

2009-06-19 burnt1ce

Vous avez un plus gros problème dans Firefox: Les images ne sont même pas côte à côte. –

J'ai mis à jour ma réponse pour l'aligner avec votre commentaire, mais je ne peux pas tester moi-même la nouvelle solution car j'obtiens une erreur "401 Authorization Required" lors du chargement des images. –

Les navigateurs autres que IE sont encore plus mauvais sur cette page.

Vos images sont chacune dans leurs propres balises <a />, qui ont un style de "display: block;". Le bloc d'affichage place généralement chaque élément sur sa propre ligne (en fonction des autres styles qui leur sont appliqués). Pour résoudre ce problème, supprimez le style "display: block" de vos éléments.

<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_1.png" /> 
</a> 
<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_2.png" /> 
</a>

Si vous avez besoin que vos images soient des éléments de niveau bloc, utilisez flotte pour les aligner les uns avec les autres, puis de résoudre tous les problèmes (potentiels) de mise en page causés en plaçant des éléments flottants sur votre page, utilisez this clever solution.

Vous devriez envisager d'utiliser des classes pour vos styles au lieu de les intégrer si possible. La situation actuelle, ils vont devenir un cauchemar pour l'entretien.

Aussi, si vous avez le contrôle dessus, put a doctype (je recommande d'utiliser XHTML 1.0 Transitional.Tous les enfants cool le font!) Dans le code HTML de vos pages afin que vous n'activez pas le mode Quirks. Laisser le mode Quirks activé peut causer beaucoup de maux de tête, surtout si vous essayez d'utiliser de "nouvelles" techniques pour rendre votre site meilleur pour vos utilisateurs.

Source

2009-06-19 03:27:03

Salut. Merci de répondre. J'ai besoin que les images soient leur propre lien, pour faire place à un menu extensible. J'ai mis à jour la page Web pour montrer le menu et comment il peut se développer de droite à gauche. Le CSS est affiché comme inline parce que j'ai copié du code HTML/CSS à partir de la barre d'outils du développeur IE. Mon code actuel fait référence aux fichiers CSS et n'utilise pas les CSS en ligne. – burnt1ce

Utilisez un DOCTYPE valide et sortir de quirksmode:

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

Source

2009-06-19 03:30:38 briscoe

Juste un lien rapide avec certaines choses qui quirksmode? Elle

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

il est dit là que la marge horizontale par défaut une image en quirksmode est de 3 pixels. Et ce remplissage est ignoré dans CSS, donc, c'est peut-être ça.

Source

2009-10-12 08:51:01

Problème CSS pour IE8 exécutant le mode Quirks

Répondre

Questions connexes