IE9, IE8, SVG, VML y doctypes

Estoy trabajando en el dibujo de formas en mi aplicación web ASP.NET. En IE9 y otros navegadores, lo estoy haciendo con SVG, y está funcionando muy bien. En IE8 y abajo, estoy usando VML. Estoy descubriendo que IE8 no muestra el VML en absoluto cuando está en el modo Estándares IE8 (no usa la vista de compatibilidad).IE9, IE8, SVG, VML y doctypes

Mi doctype está configurado en <!DOCTYPE html>. Si elimino completamente el tipo de documento, IE8 pasa al modo peculiar y funciona bien, pero luego IE9 pasa a su modo de peculiaridades (en lugar de los estándares IE9) y no muestra el SVG.

Esto ocurre en una página de prueba, por lo que no hay nada allí además del formulario que contiene un div que contiene el elemento <svg> y sus elementos secundarios o VML.

¿Qué está pasando aquí? Parece que no debería tener que cambiar el tipo de documento para diferentes navegadores, y el gráfico de reputación en la página de usuario de Stack Exchange parece funcionar de la misma manera (VML para IE8 y abajo, SVG para todos los demás, doctype HTML5) ...

Fuente

2012-05-31 Tom Hamming

¿Ha pensado en usar declaraciones de condición en el doctype? '' Sé que no es lo que preguntas, pero podría ser una solución alternativa. – Eruant

Declarar el espacio de nombres VML en modo estándar de IE8, tendrá que incluir un tercer '#default#VML' argument:

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

Hay other changes a VML en Internet Explorer 8 que puede que tenga que tener en cuenta.

Fuente

2012-07-03 23:22:05

En realidad estoy usando su sugerencia en la parte inferior sobre forzar el modo de estándares IE7 para que todo funcione. Si es IE8, entonces 'Response.AppendHeader (" X-UA-Compatible "," IE = EmulateIE7 ");' –

Hay un par de cosas más que usted necesita para comprobar:

Selector de las reglas de conducta tiene que ser modificado.

Al establecer las dimensiones o la posición de un elemento, la unidad no establece de forma predeterminada px. Debe estar explícitamente especificado para que funcione.
no se puede crear un elemento VML fuera 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);

El elemento rect No se visualizarán! No puede modificar su CSS ya que probablemente bloqueará el navegador. Sin embargo, hay una solución para eso. Copie el outerHTML del elemento en sí mismo:

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

Fuente

2012-07-10 10:17:33 miracules

HighCharts El código fuente dio una solución. Además de añadir el espacio de nombres en tiempo de ejecución, también hay que añadir un comportamiento específico CSS:

<!--[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]-->

Después de eso, el js elementos creados serán visibles en la página. Watch the demo.

Fuente

2013-01-09 14:10:31 nniico

gracias su solución funciona para mí .. – SivaRajini

Respuesta

Cuestiones relacionadas