Img en h2 ne s'alignant pas dans Internet Explorer

Question

Je suis en train de concevoir mon site personnel pour le moment et je veux avoir des images à l'intérieur des titres h2 dans la même ligne. Le balisage que j'utilise actuellement valide, ainsi que le css et l'effet désiré sur Firefox, Chrome, Safari et IE8 en mode standard.

IE8 en mode de compatibilité et IE6 + 7 cependant mettre l'image dans la ligne suivante qui a l'air horrible, bien sûr. Je ne suis pas sûr de savoir comment contourner cela et actuellement je suis coincé. Aide et une explication, éventuellement un pointeur où je pourrais me renseigner plus sur ces choses particulières avec IE serait grandement appréciée.

Le code peut être consulté en direct ici: http://storage.planet-tiax.de/test/index.html

Answer 1

Ne pas utiliser la balise <img> pour ce que vous essayez de faire. Bien qu'ils soient sont images, ils ne sont pas ce que l'étiquette <img> est destiné. L'étiquette est destinée à afficher les images contenu sur la page. Dans votre cas, les images sont des éléments stylistiques de la page et appartiennent donc au CSS, c'est-à-dire en tant qu'images de fond.

Placer les images à la place à l'intérieur du CSS, comme les images de fond, devraient également atténuer vos préoccupations IE:

h2#weblog { background: url(images/weblog.png) right no-repeat }

En ce qui concerne une ressource qui vous permettra de savoir des maux de tête IE, je trouve que QuirksMode donne une bonne vue d'ensemble des problèmes impliqués dans IE, ainsi qu'un aperçu de la façon de les résoudre.