CSS Styles not rendering for Angular View in IE8

Question

I have an angular app that is working well except in IE8. Essentially, my styles from the external stylesheet are not taking effect on code that is rendered inside of my view. I've followed the Angular IE guide. Here is the code I have on my html element:

<!--[if IE 8]>         
<html class="no-js lt-ie9" xmlns:ng='http://angularjs.org' id='ng-app' ng-app='HPApp' ng-controller='HPMainController' ng-init='loadHP()'> 
<![endif]-->

I later render an IE specific stylesheet, otherwise I use data binding to render a stylsheet specific to the URL

<!--[if IE 8]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" ng-href="css/{{cssPath}}">
<!--<![endif]-->

Later in the body of my html I have a div with a ng-view attribute

<div ng-view></div>

If I delete the div with ng-view and hardcode in my template my styles take effect. Otherwise, my styles seem to be applied to the page before the template is rendered.

Also, note that if I use the ng-href attribute on my IE specific stylesheet, IE will not load it at all.

Answer 1

Did you add

document.createElement('ng-view');

to your index file ?

angular doc p.4

CSS Styles not rendering for Angular View in IE8

Question

1 answers

solution1
0 2014-06-26 14:26:24

CSS Styles not rendering for Angular View in IE8

Question

1 answers

solution1 0 2014-06-26 14:26:24

solution1
0 2014-06-26 14:26:24