IE9, IE8, SVG, VML e doctypes

Sto lavorando al disegno di forme nella mia app web ASP.NET. In IE9 e altri browser, lo sto facendo con SVG e funziona benissimo. In IE8 e seguenti, sto usando VML. Sto scoprendo che IE8 non visualizza affatto VML quando è in modalità standard IE8 (non utilizza la visualizzazione di compatibilità).IE9, IE8, SVG, VML e doctypes

Il mio doctype è impostato su <!DOCTYPE html>. Se tolgo completamente il doctype, IE8 passa alla modalità quirks e funziona correttamente, ma IE9 passa quindi a nella sua modalità quirks (anziché in IE9 Standards) e non visualizza SVG.

Questo sta accadendo su una pagina di test, quindi non c'è nulla oltre al modulo contenente un div contenente l'elemento <svg> ei suoi figli o gli elementi VML.

Cosa sta succedendo qui? Sembra che non dovrei dover cambiare il doctype per i diversi browser, e il grafico della reputazione sulla pagina utente di Stack Exchange sembra funzionare allo stesso modo (VML per IE8 e sotto, SVG per tutti gli altri, doctype HTML5) ...

fonte

2012-05-31 Tom Hamming

Hai mai pensato di utilizzare le istruzioni condizionali sul doctype? '' So che non è quello che chiedi, ma potrebbe essere una soluzione alternativa. – Eruant

di dichiarare il namespace VML in IE8 modalità Standard, è necessario includere un terzo '#default#VML' argument:

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

ci sono other changes a VML in IE8 che potrebbe essere necessario essere a conoscenza.

fonte

2012-07-03 23:22:05

In realtà sto usando il suo suggerimento in fondo per forzare la modalità standard IE7 per far funzionare tutto. Se è IE8, quindi 'Response.AppendHeader (" X-UA-Compatible "," IE = EmulateIE7 ");' –

ci sono un paio di più cose è necessario controllare:

Selettore per le regole di comportamento deve essere modificato.

Quando si impostano le dimensioni o la posizione di un elemento, l'unità non viene impostata automaticamente su px. Deve essere esplicitamente specificato per funzionare.
Non è possibile creare un elemento VML di fuori del DOM:

var vmlFrag = document.createDocumentFragment(); 
vmlFrag.insertAdjacentHTML('beforeEnd', 
'<v:rect id="aRect" fillcolor="red"   
style="top:15px;left:20px;width:50px;height:30px;position:absolute;"></v:rect>' 
); 
document.body.appendChild(vmlFrag);

non verrà visualizzato L'elemento rect! Non è possibile modificare il suo CSS o come probabilmente si bloccherà il browser. Tuttavia, c'è una soluzione per questo. Copia il outerHTML dell'elemento in se stesso:

var aRect = document.getElementById('aRect'); 
aRect.outerHTML = aRect.outerHTML;

fonte

2012-07-10 10:17:33 miracules

HighCharts codice sorgente ha dato una soluzione. Oltre ad aggiungere lo spazio dei nomi in fase di esecuzione, si hanno anche per aggiungere un comportamento CSS specifica:

<!--[if lte IE 8 ]> 
<script type="text/javascript"> 
    document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml'); 
    document.createStyleSheet().cssText = 
     'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' + 
     '{ behavior:url(#default#VML); display: inline-block; } '; 
</script> 
<![endif]-->

Dopo di che, i js creati elementi saranno visibili sulla pagina. Watch the demo.

fonte

2013-01-09 14:10:31 nniico

ringrazia la soluzione per me. – SivaRajini

IE9, IE8, SVG, VML e doctypes

risposta

Problemi correlati