IE9, IE8, SVG, VML and doctypes

问题

I'm working on drawing shapes in my ASP.NET web app. In IE9 and other browsers, I'm doing it with SVG, and it's working great. In IE8 and below, I'm using VML. I'm finding that IE8 does not display the VML at all when it's in IE8 Standards mode (not using compatibility view).

My doctype is set to <!DOCTYPE html>. If I take the doctype away entirely, IE8 goes to quirks mode and works fine, but IE9 then goes to its quirks mode (instead of IE9 Standards) and doesn't display the SVG.

This is happening on a test page, so there's nothing there besides the form containing a div containing either the <svg> element and its children or the VML elements.

What is going on here? It seems like I shouldn't have to change the doctype for different browsers, and the reputation graph on Stack Exchange's user page appears to work the same way (VML for IE8 and below, SVG for everyone else, HTML5 doctype)...

回答1:

There are a couple of more things you need to check:

Selector for the behaviour rules needs to be modified.

When setting dimensions or position of an element, the unit does not default to px. It must be explicitly specified to work.
You cannot create a VML element outside of the 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);

The rect element won't be displayed! You cannot modify its CSS either as you will probably just crash the browser. However, there is a fix for it. Copy the outerHTML of the element into itself:

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

回答2:

To declare the VML namespace in IE8 Standards Mode, you'll need to include a third '#default#VML' argument:

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

There are other changes to VML in IE8 that you may need to be aware of.

回答3:

HighCharts source code gave a solution. Besides adding the namespace at runtime, you also have to add a specific CSS behavior :

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

After that, the js created elements will be visible on the page. Watch the demo.

来源：https://stackoverflow.com/questions/10839240/ie9-ie8-svg-vml-and-doctypes

标签

internet-explorer

internet-explorer-8

svg

internet-explorer-9

vml