5

Je postule à stackoverflow comme dernier recours. J'ai eu ce bug IE6 en utilisant l'image à l'arrière-plan du lien. Il semble que IE6 fait défiler l'arrière-plan. Comment puis-je l'éviter?IE6 background-position (?) Question

A une certaine largeur, il montre comme ceci:
alt text http://img135.imageshack.us/img135/8849/badie1.png

Et à un autre, il montre comme ça:
alt text http://img522.imageshack.us/img522/8180/badie2.png

IE7 & FF montrent ce juste comme j'attendre:
alt text http://img142.imageshack.us/img142/2296/goodie.png
Les liens sont placés à l'intérieur de la div qui flotte vers la droite.

<a href="/tr" class="menuLink" style="background-image:url(/img/tr.png);">TR</a> 
<a href="/eng" class="menuLink" style="background-image:url(/img/eng.png); margin-right:30px;">ENG</a> 
<a href="/logout" class="menuLink" style="background-image:url(/img/logout.png);"><?=$ui["exit"];?></a> 

    .menuLink { 
    font-family:"Tahoma"; 
    font-size:11px; 
    color:#003300; 
    text-decoration:underline; 
    font-weight: bold; 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    } 
    .menuLink:hover { 
    font-size:11px; 
    color:#047307; 
    text-decoration:underline; 
    font-weight: bold; 
    } 

Des conseils comment puis-je éviter cela?

+0

Question similaire: http://stackoverflow.com/questions/594870/fix-for-background-position-in-ie –

+3

Essayez d'ajouter "' zoom: 1' "au style des éléments - hasLayout in IE can causer quelques bogues étranges http://www.satzansatz.de/cssd/onhavinglayout.html.Je ne l'ai pas essayé, mais c'est l'une des premières choses que j'essaie en déboguant ce genre de choses car cela change souvent la façon dont l'arrière-plan a rendu – cryo

Répondre

1

je trouverais une solution qui fonctionne pour IE6 et utiliser Conditional Comments pour filtrer les autres versions appropriées pour IE7, FF, etc. Je voudrais aussi éviter d'utiliser dans le background-position Percents pour IE6 (reference).

+0

à la place, j'ai essayé d'utiliser background-position:center left;. Cela montre la même chose. Alors, quel exatly devrais-je commenter conditionnellement ... – turezky

+0

Essayez d'utiliser une valeur de pixel, car tout ce que vous avez affaire sont des pixels. –

+0

Changer le pourcentage en pixels ne fonctionne pas non plus :( – turezky

0

changement

background-position:0% 50%; 

à

background-position:50% 50%; 

et ajouter

background-repeat: no-repeat; 

Ce centrera l'image horizontially ainsi que verticalement et arrêter l'image du carrelage.

+0

Si je fais cela, mon image va derrière le texte :(Et les centres là, j'ai besoin des images avant le texte ... – turezky

3

Je viens de me heurter à ce problème moi-même et j'ai trouvé que l'utilisation overflow:hidden sur l'élément avec l'image de fond a résolu beaucoup de mes problèmes IE6 (mais pas tous).

+0

At-il résoudre ce problème particulier? :) – turezky

+0

Résolu pour moi! – strongriley

1

Comme indiqué dans this answer-a somewhat related question, je vous recommande d'utiliser background-position-x et background-position-y au lieu de background-position pour IE (pré-IE8).

+0

Malheureusement, cela ne fonctionne pas :( – turezky

1

Vous ne pouvez pas utiliser la position d'arrière-plan avec des correctifs * ie6 .png. La solution consiste à faire de l'image un gif ou un png de 8 bits.

* Pas que j'utilise/essayé

+1

http: //www.dillerdesign .com/experiment/DD_belatedPNG/- Conserve les positions d'arrière-plan C'est le meilleur correctif de l'image en temps réel, mais je risque de deviner que le correctif PNG est en train de tuer la position d'arrière-plan aussi – Mig

+0

@MiG J'ai utilisé le correctif htc [link] : //www.twinhelix.com/css/iepngfix/) qui n'a pas conservé les positions de l'arrière-plan, le DD_belatedPNG se maintient – Harish

+0

y PNG 32 bits à aligner parfaitement en utilisant le débordement: caché comme recommandé ci-dessus. – strongriley

1

Si vous avez padding-top ou padding-bottom dans votre élément avec des images de fond et background-positioning - IE6 vous pouvez changer votre padding-top: 16px; à margin-top: 16px; et résout le problème.

Il ne repousse pas les autres éléments et double le rembourrage.
Sinon, dans IE7 et IE8, l'attribut de remplissage fonctionne.