IE9、IE8、SVG、VML 和文档类型答案

【问题标题】：IE9, IE8, SVG, VML and doctypesIE9、IE8、SVG、VML 和文档类型
【发布时间】：2012-05-31 18:33:39
【问题描述】：

我正在我的 ASP.NET Web 应用程序中绘制形状。在 IE9 和其他浏览器中，我使用 SVG 进行操作，而且效果很好。在 IE8 及以下版本中，我使用的是 VML。我发现 IE8 在 IE8 标准模式下（不使用兼容性视图）时根本不显示 VML。

我的文档类型设置为<!DOCTYPE html>。如果我完全去掉 doctype，IE8 会进入 quirks 模式并且工作正常，但 IE9 然后会进入 its quirks 模式（而不是 IE9 标准）并且不显示 SVG。

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

这里发生了什么？似乎我不应该为不同的浏览器更改文档类型，并且 Stack Exchange 用户页面上的信誉图似乎以相同的方式工作（IE8 及以下版本的 VML，其他所有人的 SVG，HTML5 文档类型）...

【问题讨论】：

您是否考虑过在文档类型上使用条件语句？ 我知道这不是你的要求，但它可能是一个替代解决方案。

标签： internet-explorer internet-explorer-8 svg internet-explorer-9 vml

【解决方案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);

不会显示矩形元素！您也不能修改它的 CSS，因为您可能只会让浏览器崩溃。但是，有一个解决方法。将元素的 outerHTML 复制到自身中：

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

【讨论】：

【解决方案2】：

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

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

您可能需要注意 IE8 中的 VML other changes。

【讨论】：

我实际上是在使用他在底部关于强制 IE7 标准模式以使一切正常的建议。如果是IE8，那么Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7");

【解决方案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.

【讨论】：