KrisFoster KrisFoster - 11 months ago 45
CSS Question

Setting HTML of producing strange styling issues in Internet Explorer

So I have some javascript that opens a new window with no target URL. I then want to set the HTML contents of that window to be the contents of a variable, a long string of valid HTML.

var myHtmlHead = "<link href='/foo/my.css'...";
var myHtmlBody = "<div id='foo'>...'";
var myWindow="", "MyWindow","height=500,width=500");

myWindow.document.head.innerHTML = myHtmlHead;
myWindow.document.body.innerHTML = myHtmlBody;

I've cut out the content for readability. The issue is that while this works perfectly in Chrome and Firefox, IE throws up a number of strange styling issues; the CSS loads but all of the DIV's are centered and overlapping and as soon as I resize the window even an pixel, it corrects itself. I think this is down to the fact that I'm loading the CSS after the window has been loaded and its not applying it correctly until the window needs to be redrawn.

Is there a way to get around this issue, or to trigger the redrawing programatically from the parent page's JS?

Edit: IE version is 11.0.9600, though it seems to work fine with Chrome 49 for example.

Answer Source

Found the answer with continued experiment. In my own case, I was able to get much more consistent results but setting setting the <head> html with the CSS links AFTER setting the <body> content. IE seems to handle the application of the CSS much better this way round, though I cant say why.

Previously it seemed like styling (colours, fonts, backgrounds etc) were being applied, but not positional things such as sizes, locations, display layouts etc. Setting the <head> after setting the <body> content seems to address this.