Angular and IE8 — HTML5 elements not styled inside

Question

So I am trying to get angular working on IE8. I have followed all the steps on http://docs.angularjs.org/guide/ie and it seems to be working -- I see the content of ng-view rendered on IE8 when I switch between views.

The problem is that I don't actually see any content in the inspector:

.. it's just an empty ng-view tag. I can see all of the content on the page, but no styling is applied to anything inside ng-view.

I am not sure whether this is an angular or HTML5 issue. I have added the html5shiv and HTML5 elements outside of ng-view are styled nicely.

EDIT

I have determined that the problem is HTML5 elements. <section> and <article> are not styled inside ng-view, while simple divs receive all the specified styling. Outside of ng-view, <nav> and <header> are styled just fine.

Answer 1

I was able to fix this by conditionally including jQuery in IE8 based on answer given here https://stackoverflow.com/a/18317832/2026098

Answer 2

The problem here is that, even if you add a namespace and/or precreate your elements according to the IE guide there are certain parts of the angular core that don't pass through the normal jQuery element creation - I have had the issue persist even when using full jQuery instead of Angular's jQLite but I've heard that fixes things for most people. Using an HTML5 shim doesn't solve the issue on its own either.

But even so, I would prefer to not have to substitute jQuery if possible, in which case you'll need to also do the following to get a fully working solution:

• Add reset styles for the block-level HTML5 elements so they display: block; correctly
• Target the HTML5 elements with a colon prefix as well in your CSS. You need to escape these, it will look like this: header, \3A header { /*...*/ }. Note that there is a space between the escape sequence and the rest of the selector.
• If you are using jQuery, you will need to use a 1.10.x version or conditional tags to switch to it in IE8.