TechQA.

Why css class is not overridden for IE9?

207 views Asked by At

I have piece of HTML code in which we are applying special css for IE9, IE10 & IE11.

<!doctype html>
     <!--[if IE 9]><html data-placeholder-focus="false" lang="{%=user_locale_html}}" dir="ltr" class="ie9 lt-ie10 lt-ie11 lt-ie12 gt-ie8 gt-ie7 gt-ie6"><![endif]-->

     <!--[if !(IE)]><!--><html lang="{%=user_locale_html}}" dir="{%=dir}}">

<script>

  var ua = window.navigator.userAgent;

  if (ua.indexOf("Trident/7.0") > 0) 
    document.documentElement.className='ie11 lt-ie12 gt-ie10 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
  else if (ua.indexOf("Trident/6.0") > 0)
    document.documentElement.className='ie10 lt-ie11 lt-ie12 gt-ie9 gt-ie8 gt-ie7 gt-ie6';

  if(/*@cc_on!@*/false){
    document.documentElement.className='gt-ie11 gt-ie10 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
  }

</script>
<!--<![endif]-->
</html>

Note the code if(/*@cc_on!@*/false) {}

This code is overriding the css class applied in IE10 when we have userAgant=Trident/6.0. (Which causing me problem to override ie10 class.

But my question is, Why this code is not overriding the classes when the browser is IE9?

I know that @cc_on related stuff is not needed in the code, But i am curious to know how it is behaving differently.

Thanks!

javascript html internet-explorer-9 conditional-comments
Original Q&A
1

There are 1 answers

3
Deepak-MSFT On BEST ANSWER

Possible that your code is not identifying the IE 9 and that is why CSS class not get override.

I suggest you to try to refer code example below which can able to find the IE 8, IE 9, IE 10, IE 11.

<!DOCTYPE html>
<html>
<head>
 <title>Page Title</title>
 <script>
 function GetIEVersion() {
  var sAgent = window.navigator.userAgent;
  var Idx = sAgent.indexOf("MSIE");

  // If IE, return version number.
  if (Idx > 0) 
    return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));

  // If IE 11 then look for Updated user agent string.
  else if (!!navigator.userAgent.match(/Trident\/7\./)) 
    return 11;

  else
    return 0; //It is not IE
}

if (GetIEVersion() > 0) 
   alert("This is IE " + GetIEVersion());
else 
   alert("This is not IE.");
 </script>
</head>
<body>

</body>
</html>

Output:

enter image description here

Further, you can try to modify it as per your requirement may help you to solve your issue.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in INTERNET-EXPLORER-9

Related Questions in CONDITIONAL-COMMENTS

Popular Questions

Trending Questions