2013-08-21 1 views
1

J'essaye de convertir un PSD en HTML et je suis confronté à un problème. Mon site fonctionne dans tous les principaux navigateurs sauf IE8 et IE7. L'arrière-plan n'apparaît pas sur IE8 et IE7.Pourquoi mon image de fond PNG répétée n'apparaît-elle pas dans IE7 ou IE8?

L'arrière-plan est une image PNG qui est répétée. Je connais le chemin pour les images non répétées mais pour les images répétées que dois-je faire? Voici le CSS que je l'ai utilisé:

#footer-top { 
    padding: 20px 0; 
    background: url('img/footer-bg.png')repeat; 
    width:100%; 
    overflow:hidden; 
    margin-top: 38px; 
} 
+0

veuillez lire attentivement la question –

+0

veuillez inclure la partie css que vous utilisez pour l'image de fond. – mvw

+0

et le problème est que sur IE7/IE8 aucune image de fond est affichée alors qu'elle est répétée pour d'autres navigateurs (comme il se doit)? – mvw

Répondre

2

Voir le blog PNG background-repeat bug in Internet Explorer 7 and 8

Il dit:

Apparemment, Internet Explorer 7 et 8 ont toujours pas obtenu PNG tout à fait raison. En travaillant sur l'un de mes projets actuels, je suis tombé sur un bug avec la répétition des images de fond PNG.

Pour ce projet, j'ai un gabarit de page avec plusieurs éléments de conteneur qui ont tous un fond PNG de 1 pixel par 1 pixel à répéter, et il est très bien quand je le teste dans IE 7 et IE 8. Donc, j'ai créé mon prochain modèle de page avec le même style. Cette fois, IE 7 et 8 se sont tous les deux étouffés lors de la gestion de la répétition d'arrière-plan. Au lieu de répéter, ces deux navigateurs ont inexplicablement essayé d'étirer l'image 1 × 1 à travers le conteneur entier. Le PNG avait 60% de transparence alpha, mais je ne suis pas sûr que cela compte. Un collègue a suggéré d'en faire une image de 10 × 10 pixels, juste pour voir ce qui se passe. Surprise Surprise. Cela l'a réparé.

J'ai fait un peu plus de recherche pour voir si quelqu'un d'autre avait trouvé ceci et a trouvé ce billet de blog récent. L'auteur a également constaté que ce bogue semble survenir au hasard, et qu'une image de 4 × 4 pixels a résolu son problème. Comme il n'y a pas très peu de différence de taille de fichier entre 10 × 10 et 1 × 1, je m'en tiendrai au 10 × 10. Mais je suis d'accord avec lui que ce bug a créé un effet cool, et ce serait génial s'il pouvait être répliqué à volonté.

1

Peut-être avez-vous besoin d'espace avant repeat?

background: url('img/footer-bg.png') repeat; 

(je n'ai pas IE7 ou 8 à portée de main pour vérifier.)

-1

I cher, je trouver le moyen le plus facile. Essayez-le

background-image:url(images/back-bg.jpg) !important; 
background-repeat:repeat !important; 
background-color:#fff !important; 
background-position:left !important; 
+0

'! Important 'n'est pas la bonne façon de régler le problème. Cela suggère que vous avez d'autres styles qui dépassent ceux que vous nous avez montrés. Essayez d'utiliser les outils de développement d'Internet Explorer pour vérifier. –