title: alternative to foreignObject for IE9
body: <p>i really like foreignObject to show HTML regions over svg, but today i found out that it doesnt work in IE9 (why am i not surprised)
  ok. So i am looking for an alternative that works in IE9, but it seems difficult. The great thing of using foreignObject to display multiple HTML elements.</p>
  
  <p>My D3.js Force layout graph is working great in chrome and FF , but in IE9 it fail because of foreignObject . i add many HTML elements in to Div and also more CSS stuff.
  I try to replace foreignObject with other xhtml:div or xhtml:body but it's not working </p>
  
  <p>here is two Fiddles </p>
  
  <p><a href="http://jsfiddle.net/waamit14/TTKd7/">Working Fiddle</a></p>
  
  <p>need to run on IE9</p>
  
  <p><a href="http://jsfiddle.net/waamit14/HCF5W/">Modified Fiddle</a></p>
  
  <pre><code>node.append("foreignObject")
      .attr("class", "simpleDiv")
      .attr("width",50)
      .attr("overflow", "visible")
      .attr("height", 50)
      .append("xhtml:div").attr("class", "mainDiv").style("cursor", hoverStyle)
      .html(function (d) {
         var htmlString = "";
         var userImage = "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";
         htmlString += "&lt;div class='userImage' style='border-color:" + color(d) + "'&gt;&lt;image src='" + userImage + "' width='36' height='36'&gt;&lt;/image&gt;&lt;/div&gt;";
         htmlString += "&lt;div class='content' style='color:" + color(d) + ";'&gt;" + d.name + "&lt;/div&gt;";
         htmlString += "&lt;div style='clear:both;'&gt;&lt;/div&gt;";
         return htmlString;
       });
  </code></pre>
  
  <p>you can test original example in IE9 also <a href="http://bl.ocks.org/mbostock/1424037">foreignObject</a></p>