Question

使用IE 8，我试图通过javascript向我的页面添加两个VML椭圆（A，B）。渲染到父DIV的任何椭圆都会被渲染，但是第二个不是。

如果我追加孩子（A）然后追加孩子（B），则呈现椭圆A，而不是。如果我追加孩子（B）然后追加孩子（A），则渲染椭圆B，而不是。

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = Document.getElementById(mydiv);

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = document.createElement("v:oval");
grid.style.left="100px";
grid.style.top="100px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(grid2);
this.container.appendChild(grid);

我错过了添加VML的技巧吗？

我在IE 9中尝试过，结果相同。

由于公司规则，公司内部仅支持IE，许多用户仍在使用IE8，因此我暂时无法切换HTML5 Canvas。

感谢您的任何建议

Answer 1

我处理了一个类似的问题，其中添加到IE的第一个VML对象正确呈现，但后续的那些渲染得太小而无法看到。

这篇博客文章有助于确定IE不再支持VML的set / getAttribute：

http://louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/

事实证明，set / getAttribute不仅不起作用，甚至直接在DOM元素上设置属性（例如grid2.style.left =“300px”）也不起作用。

最终，似乎有用的是将每个元素的所有标记生成为字符串，并通过将其设置为另一个元素的innerHTML将其注入DOM。

var html2 = "<v:oval style=\"left: 300px; top: 250px; width: 25pt; height: 75pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker2\"></v:oval>";
var html = "<v:oval style=\"left: 300px; top: 400px; width: 94pt; height: 164pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker\"></v:oval>";

someNode.innerHTML = html2;
someNode2.innerHTML = html;

我创建了一个虚拟节点，用于托管VML：设置innerHTML，然后将其移动到所需的父节点，重复。

丑陋，但它有效！

Answer 2

使用documentFragment添加第二个节点：

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = document.documentElement;
var frag = document.createDocumentFragment();

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = frag.appendChild(document.createElement("v:oval"));
grid.style.left="300px";
grid.style.top="400px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(frag);
this.container.appendChild(grid2);

在IE8中通过JavaScript添加多个VML元素

2 个答案: