Question

我正在ASP.NET网页应用中绘制形状。在IE9和其他浏览器中，我正在使用SVG，它工作得很好。在IE8及以下版本中，我使用的是VML。我发现IE8在IE8标准模式下没有显示VML（不使用兼容性视图）。

我的doctype设置为<!DOCTYPE html>。如果我完全取消doctype，IE8会进入怪癖模式并且工作正常，但IE9会进入其怪癖模式（而不是IE9标准）并且不会显示SVG。

这是在测试页面上发生的，所以除了包含包含<svg>元素及其子元素或VML元素的div的表单之外没有任何内容。

这里发生了什么？看起来我不应该为不同的浏览器更改doctype，而且Stack Exchange用户页面上的信誉图看起来也是一样的（IE8及以下的VML，其他人的SVG，HTML5 doctype）...... / p>

Answer 1

还有一些事情需要检查：

需要修改行为规则的选择器。

设置元素的尺寸或位置时，本机不会默认为px。必须明确指定它才能工作。
您无法在DOM之外创建VML元素：

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);

不会显示rect元素！您无法修改其CSS，因为您可能只会崩溃浏览器。但是，它有一个修复。将元素的outerHTML复制到自身：

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

Answer 2

要在IE8标准模式下声明VML命名空间，您需要包含第三个'#default#VML' argument：

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

IE8中有other changes到VML，您可能需要注意。

Answer 3

HighCharts源代码提供了解决方案。除了在运行时添加命名空间外，还必须添加特定的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]-->

之后，js创建的元素将在页面上显示。 Watch the demo

IE9，IE8，SVG，VML和doctypes

3 个答案: