Angular and IE8 -- HTML5 elements not styled inside ng-view

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:

enter image description here

.. 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.

@charlietfl All of my stylesheets are defined in the <head> of the page, including the ones that should apply to templates. — Elise
– Elise, Commented Dec 13, 2013 at 7:39

Community · Accepted Answer · 2017-05-23 11:58:37Z

1

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

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Dec 14, 2013 at 13:11

Elise

5,1544 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom10271 Over a year ago

Include jQuery if IE8? I have the same problem but don't know hoe to fix it... Include it before or after Angular?

Elise Over a year ago

jQuery needs to be included in <head>. I have included angularjs just before closing the </body>.

pospi · Accepted Answer · 2014-04-16 23:23:59Z

1

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.

answered Apr 16, 2014 at 23:23

pospi

3,5983 gold badges29 silver badges28 bronze badges

2 Comments

Elise Over a year ago

Having later tested on ie8 on Windows XP, I can confirm that adding \:section, \:article... { display: block} is what fixed the issue for me.

pospi Over a year ago

To clarify for those reading: using \3A header or \:header in a stylesheet is perfectly equivalent, I was preferring the hex code format since my preprocessor (in this case, LESS) had trouble parsing the colon-escaping syntax.

Collectives™ on Stack Overflow

Angular and IE8 -- HTML5 elements not styled inside ng-view

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related