IE bug css: il ajoute 'padding-left' à la fin de 'background-image'?

Question

J'ai un bug bizarre.
Dans mon fichier Css je la règle suivante:

.conf-view a 
{ 
    padding-left: 10px; 
    background-image: url("images/bullet-green.gif"); 
    background-position: center left; 
    background-repeat: no-repeat; 
} 

Le problème est que IE interprète en quelque sorte comme ceci:

.conf-view A /* NOTE - this is copied from the IE-Developer tools css tab. */ 
    background-image : url(images/bullet-green.gif); PADDING-LEFT: 10px 
    background-repeat : no-repeat 
    background-position : left center 

Voir la gauche padding-là?
Maintenant, le navigateur ignore simplement la règle de remplissage, entraînant un échec de mise en page.

Est-ce un bug connu? quelqu'un peut-il trouver un moyen de contourner cela?

Merci beaucoup
Kfir

Answer 1

Il semble que ce soit la manière différente d'appliquer les images d'arrière-plan ... En sauvegardant votre code et en jouant avec la feuille de style, le padding à 50 déplaçait l'image et le texte de façon à ne pas ignorer le padding. avec le positionnement de l'image de fond différemment.

curieusement la suggestion de faileN n'était pas loin de ce que j'ai fait pour le réparer. Si vous mettez "display: inline-block" alors cela semble fonctionner dans IE7 et FF. Bien sûr, vous voudrez tester il n'a pas d'effets secondaires ailleurs avant de l'utiliser.

Answer 2

Peut-être est parce que le a -Element est normalement un élément en ligne. Il n'est pas courant que ces éléments aient des images d'arrière-plan et des marges/marges, même si c'est autorisé. Mettez display: block; dans votre définition de style. Peut-être que cela vous aide dans cette situation.

EDIT

En attente de votre échantillon de code :)

Answer 3

Il semble être un bug dans IE Developer Tools, où le code d'affichage gobe juste la définition suivante non-fond (classés par ordre alphabétique, apparemment) si vous avez une image de fond spécifiée séparément. Votre texte ne chevauche pas votre image de fond sur cette page sur l'un des liens, donc pour moi il semble que le CSS est interprété correctement indépendamment; pouvez-vous expliquer pourquoi vous pensez que ce n'est pas le cas?

Je ne sais pas comment ils ont réussi à créer ce bug, mais si vous voulez pour elle d'aller loin, en précisant les définitions de fond dans le raccourci semble ne pas présenter ce comportement:

background:transparent url("images/bullet-green.gif") scroll no-repeat left center;