Problemi di IE6 con PNG trasparenti

StackOverflow https://stackoverflow.com/questions/130161

Domanda

Mi sono abituato all'idea che se voglio / devo usare i PNG alfa-trans in modo cross-browser, che uso un'immagine di sfondo su un div e quindi, nel CSS solo di IE6, segnare il sfondo come "nessuno" e includi il "filtro" corretto argomento.

C'è un altro modo? Un modo migliore? C'è un modo per farlo con il tag img e non con le immagini di sfondo?

È stato utile?

Soluzione

La linea di fondo è che, se si desidera la trasparenza alfa in un PNG e si desidera che funzioni in IE6, è necessario applicare il filtro AlphaImageLoader.

Ora, ci sono molti modi per farlo: hack specifici del browser, commenti condizionali, Javascript / JQuery / JLibraryOfChoice iterazione di elementi, servizio CSS lato server tramite UserAgent-sniffing ...

Ma tutti si riducono all'applicazione del filtro e alla rimozione dello sfondo.

Altri suggerimenti

Ecco una soluzione specifica che mi piace, utilizzando Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

È facile da aggiungere a un sito esistente, gestisce tutti i tipi di immagini (pulsanti dei moduli, sfondi, normali tag IMG, ecc.) e lascia il tuo CSS bello e pulito.

Questo è molto probabilmente il "migliore" modo. Ma tieni presente che non è solo alpha-trans che IE6 non implementa correttamente quando si tratta di file PNG; lo spazio colore è danneggiato a causa di IE che non implementa correttamente la gamma, e quindi i file PNG mostrano spesso "più scuro". di quanto dovrebbero.
Un'alternativa "soluzione" che abbiamo implementato in un recente progetto è stato quello di contrassegnare ogni immagine png con un "toGif" classe, nel CSS di cui viene chiamato un comportamento personalizzato .htc che modifica l'estensione .png in .gif se il browser viene rilevato come uno che abbiamo contrassegnato come problema. Includiamo solo una versione GIF di ogni PNG insieme ad esso nello stesso percorso e, se si scopre che il browser è uno che non gestisce correttamente i PNG, lo scambia con una versione GIF dell'immagine. Pertanto sacrificiamo la fusione alfa a favore della trasparenza totale garantita e della precisione del colore, e lo facciamo solo quando sappiamo che probabilmente non sembrerà così com'è.
Potrebbe non essere una soluzione ideale, ma suppongo sia la natura del cross-browser.
Modifica: In realtà ora che guardo il progetto in questione, abbiamo usato un comportamento .htc per una classe img chiamata " alpha " nonché che lancia automaticamente il filtro corretto sull'immagine. Quindi stai rilevando il browser usando javascript invece di un puro hack CSS solo per IE6, quindi potrebbe essere un po 'più elegante ... ma sostanzialmente è la stessa cosa.
Per un'introduzione su come scrivere comportamenti DHTML, prova questo link .

Il caricatore di immagini è l'unica soluzione disponibile per IE6. Si noti che il supporto PNG è molto rudimentale (insieme a IE7) e non è in grado di gestire correttamente sfondi trasparenti in loop. L'ho imparato nel modo più duro quando ho cercato di progettare un sito Web con un contenitore trasparente. Ha funzionato perfettamente su Firefox, ovviamente.

La correzione dovrebbe essere OK per piccole aree di sfondo e qualsiasi grafica in primo piano trasparente, ma ancora una volta sconsiglio di progettare un sito Web che utilizza grandi quantità di trasparenza con Internet Explorer.

Alla fine la mia soluzione era quella di mostrare un colore piatto per IE, ma conservavo la trasparenza per gli altri browser. Fortunatamente alla fine non ha danneggiato troppo il design.

Un altro modo per aggirare questo è usare 2 immagini separate, ad esempio una GIF e un PNG trasparente, e indirizzare il tuo CSS di conseguenza: 

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6 non capisce i selettori secondari CSS, quindi ignorerà la regola, mentre i browser che lo comprendono ti daranno un bel PNG trasparente.

L'unico aspetto negativo è che devi avere due immagini separate e il design potrebbe non sembrare esattamente lo stesso browser incrociato ma fintanto che non sembra rotto dovresti essere a posto.

Ecco 2 opzioni che non usano il filtro AlphaImageLoader.

Per me, se non è possibile inviare un .gif opaco a IE6, utilizzo Fireworks per aggiungere una palette compatibile con IE6 al .PNG .

La solita soluzione per gli elementi img è quella di cambiare l'src in modo che punti a una GIF trasparente 1x1 pixel e quindi utilizzare lo stesso filtro hack.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top