Menu
See the solution at the bottom of the question.
IE 8 (and lower) does not work good with unknown elements (ie. HTML5 elements), one cannot style them , or access most of their props. Their are numerous work arounds for this for example: http://remysharp.com/2009/01/07/html5-enabling-script/
The problem is that this works great for static HTML that was available on page load, but when one creates HTML5 elements afterward (for example AJAX call containing them, or simply creating with JS), it will mark these newly added elements them as HTMLUnknownElement as supposed to HTMLGenericElement (in IE debugger).
Does anybody know a work around for that, so that newly added elements will be recognized/enabled by IE 8?
Here is a test page:
<html><head><title>TIME TEST</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> </head> <body> <time>some time</time> <hr> <script type="text/javascript"> $("time").text("WORKS GREAT"); $("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion $("time").text("UPDATE"); </script> </body> </html> In IE you will see the: UPDATE , and NEW ELEMENT. In any other modern browser you will see UPDATE, and UPDATE
911
for all html5 issues in IE7 i use html5shiv and to accommodate the html5 elements coming back in ajax calls i use innershiv.
these two small plugins worked for me like a charm so far.
-- Praveen Gunasekara
151
jQuery has some dark, magical ways of creating elements. Using document.createElement instead should make all the difference:
var time = document.createElement("time"); time.innerHTML = "WORKS GREAT"; document.appendChild(time); I do not believe you can use the .append() syntax (like .innerHTML += "") with HTML5 and IE. The problem isn't IE's ability to use or display the HTML5 elements, it's its ability to parse them. Any time you programmatically instantiate an HTML5 element, you must do it with document.createElement.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
