Recently I have had a nightmare of a problem with an apparent rendering bug in IE7 + IE8 which had all the hallmarks of the “peakaboo bug”. Firstly, here is a quick explanation of my problem:
AJAX fetches content into an element on the page, in ALL other browsers this content appears and works normally as I would have expected, however in Internet Explorer 7 and Internet Explorer 8 the content would not appear in the page at all.
However upon debugging using the IE9 developer tools (having IE in 7/8 mode), the content still does not appear but when inspecting the DOM, you can see the content IS there but is somehow “hidden”, I quote hidden because no CSS property is controlling this state, and trying to show the content using various CSS tags does not make the content appear.
So after searching tirelessly for a solution and trying the well documented “zoom:1”, “position:relative” and many other possible solutions, only for nothing to work for me, I eventually came to the solution that it would never work… And added a clause to STOP IE7 and IE8 from using AJAX on my site.
FINALLY! I have found a solution, a very strange and weird solution I must admit!
I found out that changing:
$('#' + AAPL_content).html(output);
document.getElementById(AAPL_content).innerHTML = output;
Fix’s the problem and now IE7 and IE8 are functioning as expected, ALL of the time.
Moral of the story…
Oh… And… DONT USE .html() to change content… EVER!!