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

使用IE8，我试图通过javascript向我的页面添加两个VML椭圆（A，B）。将渲染附加到父DIV的椭圆，但第二个椭圆不渲染

如果我附加子（A），则追加子（B），则呈现椭圆形A，B不。 如果I appendChild（B），则appendChild（A），椭圆B被渲染，而A不被渲染

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画布

感谢您的建议

使用添加第二个节点：

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

---

我处理了一个类似的问题，第一个添加到IE中的VML对象被正确渲染，但随后的对象被渲染得太小而看不见

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

事实证明，不仅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;

var html2=”“；
var html=“”；
someNode.innerHTML=html2；
someNode2.innerHTML=html；

我创建了一个虚拟节点，用于承载VML:set innerHTML，然后将其移动到所需的父节点，重复

---

难看，但它成功了

为什么不使用？这有一个更干净的API；并且将VML用于IE（其他浏览器使用SVG），因此您将获得IE支持。HTML页面的doctype是什么，这对在IE中呈现VML有重要影响？我已经开始查看Raphael库，它看起来很有希望。至于DOCTYPE，我将验证我拥有的内容。大卫，你是对的，根据我的经验，IE比其他浏览器对DOCTYPE更敏感。谢谢你的快速建议。