Tag Archives: ie8

IE8 Angularjs

I had a problem with IE8 compatibility mode going to document Mode: IE 7 standards. This caused my javascript to act funny and radio buttons not to work.
I was also getting the error pop up too:

https://docs.angularjs.org/api/ng/service/$sce

I found the following on stack overflow that is the key as my project is using Html5.
I have the in my project

http://stackoverflow.com/a/7685060/708860

Excerpt of what I did that worked.

Note the the [if] tag before the <!doctype html>

<!--[if HTML5]><![endif]-->
<!doctype html>
<!--[if the boilerplate conditionals goes here<![endif]-->
<head>
<!--[if !HTML5]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->

Twitter Bootstrap grid system with Yeoman, Angular, and IE8

Versions Used

Bootstrap 3.1.1

Yeoman angular-generator 0.8

Problem

I ran into this testing the IE8 rendering of the twitter bootstrap and the grid system with my angularjs app generated by yeoman.

What getbootstrap.com has

On the bootstrap site they have a block that checks your version of IE and if it is below IE9 then includes respondJs.

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- [if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

Include respond in your project

Install in project

bower install respond -S

Include in the html via grunt

grunt bowerInstall

Move include from the  block to a if IE is less than IE 9

<!--[if lt IE 9]><script src="bower_components/respond/dest/respond.src.js"></script><!--<![endif]-->

Notes

You will have to remove the respond from your index.html <!–bower:js> if you rerun the following

grunt bowerInstall