Come si ottiene IE6 per visualizzare le immagini codificate in base 64?IE6: Come ottenere immagini base64 inline per lavorare con IE6?
<img src="data:image/png;base64,....." />
Questo funziona in Firefox/Chrome/Safari ma non IE6.
Installa il Chrome Frame di Google?
Seriamente, non è possibile. IE6 non supporta le immagini in linea base64.
Posso fare un'istruzione condizionale in modo che IE6 si colleghi al file attuale ma per tutto il resto, visualizza la base64? – Jacob
Dovresti impostare dinamicamente lo src usando javascript, che IMO è più fastidioso di quello che vale. Il caricamento delle immagini dal server non è una cosa negativa; significa che gli utenti possono memorizzarli nella cache per più carichi di pagina. Perché stai cercando di renderli in linea? –
La parte triste di Chrome Frame è che le aziende non inizieranno a prenderlo - e sono quelle che usano ancora IE6. In quanto tale, è relativamente sciocco e triste allo stesso tempo. È un'idea interessante, ma sprecata per gli sviluppatori e non per gli utenti finali. – mimetnet
Se questo non è per un ambiente aziendale, direi di eliminare il supporto IE6 tutti insieme e chiedere a persone che installano Chrome Frame se insistono sull'utilizzo di un browser obsoleto.
Posso fare un'istruzione condizionale in modo che IE6 si colleghi al file attuale ma per tutto il resto, visualizza la base64? – Jacob
Dipende, stai usando un linguaggio di scripting come PHP? – mgbowen
Come potrebbe aiutare PHP? Questo dovrebbe essere eseguito sul lato client. No, solo HTML – Jacob
ORIGINALE
Non credo IE6 supporta i dati in linea per il tag <img/>. Tuttavia, potresti voler provare un altro formato come GIF o JPG.
EDIT Tenuto conto del fatto che ci sono voluti per sempre IE per supportare con precisione PNG (ancora discutibile) si potrebbe facilmente dedurre che PNG potrebbe non essere supportata da un formato di dati in linea per <img/> tag. Detto questo, vai a **ORIGINAL**
Se IE6 non supporta i dati in linea, sarebbe importante quale sia il formato? –
Forse mimetnet sta pensando che il problema è la mancanza del supporto * PNG *, nel qual caso GIF o JPG potrebbero funzionare. – pavium
IE6 supporta PNG (ma nessuna trasparenza alfa, anche se sembrano esserci soluzioni alternative, vedere http://support.microsoft.com/kb/294714) –
Puoi usare base64 in CSS, almeno. Si prega di dare un'occhiata: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Forse più ricerca potrebbe aiutare a usare mhtml: // anche per le immagini in linea.
IE6 richiede un'espressione per interpretare correttamente le immagini codificate in base 64. Dean Edwards descrive la soluzione qui: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Nota: questo è un trucco molto brutto. In primo luogo stavamo inserendo il codice dell'immagine nel nostro CSS; con questa soluzione è necessario inserire dati di presentazione in Javascript o dati comportamentali nel proprio CSS. Cattivo ma necessario.
La mia soluzione funziona senza problemi su IE6. Potrebbe aiutarti!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
Puoi spiegare cosa sta succedendo qui? Sembra interessante, ma per esempio ...! Locoloco? –
@Chris Questo fa uso di HTML multiparte (vedi la mia risposta sotto) - una tecnica poco implementata per descrivere più risorse in un singolo file HTML. Dato che il file avrà un singolo URI, le varie parti sono dotate di intestazioni 'Content-Location' che possono essere referenziate con un '!' Precedente quindi aggiunto alla posizione (proprio come '#' specifica una determinata posizione del nodo DOM all'interno di un HTML documento). – Barney
Ho avuto grandi speranze in questo. Non funziona per me in IE6. :( – varun
Questa potrebbe essere una soluzione rapida per rendere le immagini Base64 mostrando in IE6 ancora:
Base64 image fix for Internet Explorer
* Ci scusiamo per il collegamento interrotto, ora arriva quella corretta!
Penso che questo sia un modo non intrusivo per far funzionare di nuovo le cose. In realtà ripara le immagini dopo che hai quelle immagini rotte (icona rotta) già visualizzate su IE.
le immagini di base64 vengono visualizzate in IE6 e IE7 ... nell'ultima ho trovato una soluzione semplice quando si utilizzano immagini codificate in css.
"scrivere due attributi in una stessa classe. Utilizzare hack specifiche del browser css"
mi accingo a spiegare qui di seguito.
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
Penso che questo sia un modo semplice per superare il problema di IE6 e IE7. Accolgo con favore, se qualcuno ha qualche altra soluzione migliore di questa. –
Solo curioso: perché vuoi (o qualcuno) vuoi farlo? L'immagine memorizzata nella cache non dovrebbe essere preferita per tutti i browser? Mi sembra soddisfacente in un file CSS esterno, ma non in HTML. – Arjan
Memorabile nella cache come in: qualsiasi immagine che viene scaricata come al solito e può quindi essere memorizzata nella cache da un browser. O è usato in qualche HTML singolo, non ospitato? – Arjan
Inline riduce le richieste HTTP. – Jacob