How should I detect the IE browser?

Question

I've already done feature detection on a particular feature to decide if I can use it or whether I have to use a work-around. But, unfortunately, I found that IE has some bugs in that feature that render it useless to me even when it's present. So, even though it passes the feature detection, I need to detect that the browser is IE so I don't use that feature if it's IE.

I've tried to see if I could do feature detection on the actual buggy behavior (which would be best because it would adapt if IE fixes the behavior in the future), but there does not appear to be any way to do that (subject of a different question). That means I'm left with trying to conclusively identify that it's an IE browser so I can avoid the buggy feature. I do not want to use the useragent string since we all know that it is easily spoofed and can easily be wrong.

So, I'd like to do feature detection on whether it's the IE browser or not.

The approach I have so far is this:

var isIE = (document.body.attachEvent && window.ActiveXObject);

This looks to see if the attachEvent() method is present and if ActiveXObject support is present. I had to do more than just the attachEvent check because Opera supports attachEvent.

Is this a reliable way to detect IE? Are there better ways?

Please don't respond with I really shouldn't do browser detection, but should use feature detection instead. I'm already doing feature detection, but that caused a problem because a browser that "supports" the feature and thus passes feature detection turns out to be so buggy that I can't use the feature in that browser. So, now I must detect the buggy browser.

If you want to know more about the specific situation this is being used in, it's described in this other question.

Answer 1

Conditional comments conditional compilation, explained here:

http://www.quirksmode.org/css/condcom.html

Or the related cousin found here:

http://www.javascriptkit.com/javatutors/conditionalcompile.shtml

Both are Internet Explorer exclusive, so they will allow you to sniff IE.

<script type="text/javascript">

/*@cc_on
document.write("JScript version: " + @_jscript_version + ".<br>");
   /*@if (@_jscript_version >= 5)
      document.write("JScript Version 5.0 or better.<br \/>");
      document.write("This text is only seen by Internet Explorer browsers that support JScript 5+<br>");
   @else @*/
      document.write("This text is seen by all other browsers (ie: Firefox, IE 4.x etc)<br>");
   /*@end
@*/

</script>

Answer 2

In the linked post, the suggestion of conditional comments was given. This will allow you to detect even the version of IE.

Add something like this in your head:

<!--[if lt IE 9]>
  <script type="text/javascript">
    var lt9=true;
  </script>
<![endif]-->

This is specific to IE, and will be ignored as a comment in other browsers.

For simple detection use something like this:

<!--[if gte IE 6]>
  <script type="text/javascript">
    // this is IE greater than or equal to 6
    var isIE=true;
  </script>
<![endif]-->

Answer 3

Using conditional comments rather than conditional compilation has the advantage of allowing detection of the version of IE (as opposed to JScript version, which is the best you can get from conditional compilation). You can do this from script using innerHTML as follows. The following example shows how to detect IE 8 or lower:

var div = document.createElement("div");
div.innerHTML = "<!--[if lte IE 8]><i></i><![endif]-->";
var isIe8orLower = (div.getElementsByTagName("i").length == 1);

alert("Is IE 8 or lower: " + isIe8orLower);

Be aware that IE 10 and later do not support conditional comments at all. However, conditional compilation continues to work and is the next best option, so I'd suggest using it, although, as mentioned above, it is unable to identify an actual version of IE.