Detecting IE6 using jQuery.support

Question

Anyone have any ideas on how to test for something specific for IE6 (and not IE7) using jquery.support?

My problem is that IE6 supports :hover psuedo-class only for anchor elements and IE7 does support it for all elements (as FF, Chrome, etc). So I want to do something special in case the browser does not support :hover for all elements... thus I need a way to test for this feature. (don't want to use jQuery.browser). Any ideas?

Answer 1

While it's good practice to check for feature support rather then user agent, there's no simple way to check for something like support of a css property using JavaScript. I recommend you either follow the above posters suggestion of using conditional comments or use jQuery.browser. A simple implementation (not validated for performance or bugs) could look like this:

if ($.browser.msie && $.browser.version.substr(0,1)<7) {
  // search for selectors you want to add hover behavior to
  $('.jshover').hover(
    function() {
      $(this).addClass('over');
    },
    function() {
      $(this).removeClass('over');
    }
}

In your markup, add the .jshover class to any element you want hover css effects on. In your css, add rules like this:

ul li:hover, ul li.over { rules here }

Answer 2

You can use a Microsoft Internet Explorer specific Conditional Comment to apply specific code to just IE6.

<!--[if IE 6]>
  Special instructions for IE 6 here... e.g.
  <script>...hook hover event logic here...</script>
<![endif]-->

Answer 3

Thickbox uses

if(typeof document.body.style.maxHeight === "undefined") {
    alert('ie6');
} else {
    alert('other');
}

Answer 4

This is one example of where we should take a step back and ask why you're doing that.

Typically it's to create a menu. If so I highly suggest you save yourself some headaches and use a plug-in like superfish or one of the many alternatives.

If not I suggest you use the jQuery hover() event listener. For example:

$("td").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

will do what you want.

Answer 5

I would use Whatever:hover - http://www.xs4all.nl/~peterned/csshover.html

It uses behavior and works well for me.

Answer 6

Just for fun (not using jQuery.support):

$(document).ready(function(){
    if(/msie|MSIE 6/.test(navigator.userAgent)){
        alert('OMG im using IE6');
    }
});

You can also do it via php

<?
if(preg_match('/\bmsie 6/i', $ua) && !preg_match('/\bopera/i', $ua)){
    echo 'OMG im using IE6';
}
?>

Answer 7

jQuery.support has no properties to detect :hover support http://docs.jquery.com/Utilities/jQuery.support

But probably you can simply use the hover() event http://docs.jquery.com/Events/hover

Answer 8

if ($.browser.msie && parseInt($.browser.version, 10) == 6) {
  alert("I'm not dead yet!"); 
}