5

I have a script that runs great in IE 9+ and all other browsers. But in IE 8 or below there are visual errors. I can fix this visual errors by changing some animation effects for IE 8 and below. To do this I need to have two scripts on my page. One for IE 9+, Firefox, Chrome, Safari, and the other for IE 8 and below.

Here is what I have tried: 

// First the Script that runs for non-IE browsers. 
<!--[if !IE]>
<script type="text/javascript">
// Script that runs
</script>
<![endif]-->

// Now for the Script for IE 8
<!--[if lt IE 9]>
<script type="text/javascript">
// Script that runs
</script>
<![endif]-->

First Question and the main one is when attempting this it doesn't seem to work. IE starts acting crazy and the script doesn't function proerply at all. If I remove the first script and leave the second one it works without issue. It would seem that the <!--[if !IE]><!--> is not working correctly.

Second Question: Using <!--[if !IE]><!--> can I target only IE 8 and below?

Andreas
  • 21,535
  • 7
  • 47
  • 56
L84
  • 45,514
  • 58
  • 177
  • 257
  • 2
    look at my answer on this question: http://stackoverflow.com/questions/10383220/creating-layout-for-a-specific-browser/10383277#10383277 – Dan Barzilay Aug 19 '12 at 08:33
  • A conditional comment for non IE browser is absolutely useless as only IE interprets these ;) Furthermore your comments have the wrong format. `` – Andreas Aug 19 '12 at 08:42
  • @Andreas - That was a typo which I fixed, thanks for catching that. As for the conditional comments for non-IE browsers it is not for those browsers. From my understanding what ` ` ``is supposed to be is telling IE that "This code is for real browsers, not me (IE)." – L84 Aug 19 '12 at 08:47

1 Answers1

5

Try doing it the HTML5 Boilerplate way. Then just target IE versions by class in JS and CSS.

Replace your opening <html> tag with the following. Adjust to your needs:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

In JavaScript:

var isIE8 = document.getElementsByClassName('lt-ie9').length;
var isIE7 = document.getElementsByClassName('lt-ie8').length;

if (isIE8) {
  ...
}

if (isIE7) {
  ...
}
elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Although if you are using IE8 you need this http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie – patrickzdb Dec 08 '14 at 14:31