Detecting IE6 using Javascript/jQuery revisited

Question

I need to detect IE6 in order to work around the lack of position:fixed. I've been using a simple regex:

var isIE6 = /msie|MSIE 6/.test(navigator.userAgent);

This works almost all the time, except for the user whose browser claims to be both IE6 and IE7:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1; .NET CLR 3.0.04506.30)

Glorious.

I'd love to use jquery.support, but it looks like that doesn't support querying on whether position:fixed is available. So I'm back to detecting IE6.

There are various suggested solutions, such as looking for the existence of maxHeight. But those seem fairly random and scare me - if there are exceptions to the regex above, how can I be sure there are no exceptions to maxHeight?

I'm thinking of using conditional comments - that way at least it'll be IE itself claiming to be IE6, not a hack. Something like:

<!--[if IE 6]>
<SCRIPT> var isIE6 = true; </SCRIPT>
<![endif]-->

Alternatively there's a function that directly tests if position:fixed is available, but that seems a bit heavy.

Any reason my conditional comment approach won't work? Are there better approaches?

Answer 1

http://api.jquery.com/jQuery.browser/

if ($.browser.msie && parseInt($.browser.version) == 6) {
  // do something
}

Answer 2

<script type="text/javascript">
    if (nothing_works) {
        is_ie6 = true;
    }
</script>

Seriously though, your conditional comment is probably the best and most accurate detection method. Even if a browser lies in their user-agent, it presumably won't parse the conditional comment as if it were IE6.

I have to go home and cry a little bit now that I've learned someone is still developing for IE6.

Answer 3

Paul Irish wrote an addition to $.support specifically for checking for position: fixed support. I recommend you go this route, using feature-detection rather than browser detection whenever possible.

You just need to include the last function in that addition, this portion:

$.support.positionFixed = (function() { ..... })();

Include this after jQuery, then you can use it in your code, like this:

if(!$.support.positionFixed) {
  //handle browsers that don't support it
}

Answer 4

The best way I've come across to overcome IE issues is to use conditional comments:

<!--[if IE 6]>
... link IE 6 specific stylesheet or a script...
<![endif]-->

This approach will also make your page forward-compatible, so that future versions of IE can render it without needing all the IE6 (and lower) styles.

Answer 5

There is a nice and detailed post on IE blog on feature detection:

http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx

Basically they're (understandably) against browser version detection:

"DON'T: Detect Specific Browsers"

There are so many scenarios (as in your example) that browsers lie about their versions, it's better to use feature detection instead.

Answer 6

I say you should go with the conditional comment too. It's working well for CSS and JavaScript or whatever you might want to put there. It seems to me like it's the best option. But I wouldn't use a variable like you did in your example. I would go for an external ie6.js link that will override whatever you are doing in your original non-ie6 code. That way, you will not get ie6 junk/variables in your clean code.

<!--[if IE 6]>
<script type="text/javascript" src="ie6.js"></script>
<![endif]-->