Today I encountered a bug that affects every version of Internet Explorer from IE6 all the way through IE9. Here’s what happens.
The Bug
- Set a Javascript string variable containing CSS styles (
<style>
or<link>
) followed by some HTML content, such as a<p>
tag (in my application this happened via JSONP). - Add a
<div>
node to the DOM - Insert the content from #1 into the
.innerHTML
property of the<div>
- The content gets inserted, devoid of CSS styles.
<!-- these styles are ignored when inserted via innerHTML -->
<style>
p { color: blue; }
</style>
<p>Hello, how are you!</p>
The Solution
The simple solution was to put the other markup before the <style>
or <link>
tag. Bizarre.
<p>Hello, how are you!</p>
<!-- these styles are applied when inserted via innerHTML -->
<style>
p { color: blue; }
</style>
Because IE needs something that affects the layout before it will apply CSS styles in an innerHTML property, these will not work as style triggers:
<!-- a comment -->
<p></p>
(or any other empty block-level HTML tag)
Unbelievable, but this actually worked out!
Now the problem is to figure out what to print there.
It was working when I did the same but with document.write(SAME CODE) thogh: I have it as document.write for inserting widget and innerHTML for preview, the problem was only in 2nd case.
This page: http://www.49st.com/developer/widget still has this issue right now in IE7 but will be fixed at next site revision.
Thanks for this solution.