2011-10-14 16 views
34

Ho un errore strano. Sto piastrellando un'immagine semitrasparente di 1x1 pixel giallo PNG in un DIV che sovrappone del testo. Con i browser normali , tutto sembra come dovrebbe. Sopra c'è un testo e una sovrapposizione semitrasparente gialla.Internet Explorer 8 mostra il gradiente anziché l'immagine di sfondo

This is how it looks in Chrome

In Internet Explorer 8 Tuttavia, invece di piastrelle l'immagine PNG 1x1, viene visualizzato un gradiente (!).

This is how it looks in Internet Explorer 8

Il CSS è piuttosto semplice:

.edit_section_overlay { 
    position: absolute; 
    z-index: 150; 

    top: -6px; 
    bottom: -6px; 
    left: -6px; 
    right: -6px; 

    border: 1px solid #afad9d; 
    background: url('../../images/content/edit/section/overlay/background-color.png') repeat; 

    min-height: 34px; 
    cursor: move; 
} 

Non ho mai visto un bug simile prima e Google non mi aiuta ...

Ecco una demo in jsFiddle, http://jsfiddle.net/jUVfS/

+1

Puoi fornirci un collegamento a un sito demo? E perché usi uno sfondo semitrasparente * immagine * invece di uno sfondo semitrasparente * colore * in primo luogo? – phihag

+0

Sicuro al 100% che non usi alcun css specifico di IE? Effetto molto strano – Alex

+1

@phihag Ecco una demo su JSFiddle: http://jsfiddle.net/jUVfS/ (Sto usando IE8.0.7600.16385) – Lukas

risposta

114

L'immagine .png deve avere dimensioni maggiori, allo minimo1x2 anziché 1x1.

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 non esegue la ripetizione di un pixel 1x1 sfondo immagine semitrasparente correttamente quando qualsiasi altro elemento sulla pagina sta usando il "-MS- filtro " drective per la trasparenza alfa.

+0

Grazie! L'ha fatto! – Lukas

+8

Sono sorpreso che più persone non siano state qui e su hanno votato questo problema e rispondono dato che è così comune! +1 –

Problemi correlati