How do I detect IE 8 with jQuery?

Question

I need to detect not only the browser type but version as well using jQuery. Mostly I need to find out if it is IE 8 or not.

I am not sure if I am doing it correctly.

If I do :

if (jQuery.browser.version >= 8.0) {
dosomething}

I am not sure it will work for version 8.123.45.6 or will it?

Edit: Note that JQuery 2+ has dropped support for IE8 and below, and therefore can no longer be used to detect IE8. If using a current version of JQuery, it is necessary to use a Non-JQuery solution.

the answers that are suggested below suggest you use jQuery.browser. However, the jQuery documentation deprecates the use of jQuery.browser. Instead, they suggest you use the jQuery.support and point to a feature that is not supported to flag the browser. For example, you can use if(jQuery.support.opacity == false){ your IE8 and IE7 code } — IberoMedia, Sep 23 '12 at 10:10
This `jquery.support.opacity` just did what I wanted. Thanks... — nrod, Jan 17 '13 at 12:59
[Skip to an answer that detects specific *versions* reliably, doesn't rely on `jQuery.browser`, doesn't need an extra library like Modernizr, and doesn't require editing the HTML (so is suitable for plugins etc)...](http://stackoverflow.com/a/18615772/568458) — user56reinstatemonica8, Sep 04 '13 at 13:54
If you're doing things properly, you should hardly ever need to do browser version detection. There is a reason that this feature was removed from jQuery, and that reason is that browser version detection is bad practice. Using feature detection instead will solve the problem in almost all cases. — Spudley, Sep 04 '13 at 14:26
I need to detect IE8 because it's the only browser who's javascript engine is so slow that it brings up a dialog that says "do you want to stop running script" on this page, and the default is "yes". If there's a feature-detection mechanism for this, I'll use it. Otherwise it's if browser == IE8. I can't optimise the javascript, because it's Kendo's own treeview code that causes it — PandaWood, Jan 23 '14 at 03:39
I realize this is an old post, but I believe that JQuery can no longer detect IE 8, since current versions of JQuery (2.1.1+) no longer work with IE8 and below. — Dave, Nov 12 '14 at 14:55

meo · Answer 1 · 2013-02-18T10:59:36.043

172

I think the best way would be this:

From HTML5 boilerplate:

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

in JS:

if( $("html").hasClass("ie8") ) { /* do your things */ };

especially since $.browser has been removed from jQuery 1.9+.

edited Feb 18 '13 at 10:59

answered Oct 03 '11 at 12:40

meo

30,872
17
87
123

11

This is a very clever way of detecting IE versions. I like a lot! – Greg Jun 13 '12 at 21:21
but does not work if your website is delivered with 'Content-type: application/xhtml+xml' header, than these conditional comments are ignored – philipp Sep 20 '12 at 05:10
1

Very clever ... but worth noting that you need check the current classes added by the conditionals in HTML5BP. At the moment I think the class is `lt-ie9` AOT `ie8` – byronyasgur Mar 11 '13 at 20:31
2

@meo I like this implementation too. But is there a reason why the class is attached to `` instead of ``? – resting Aug 27 '13 at 00:49
@meo Interesting. Thanks. – resting Sep 05 '13 at 16:17
can this be used to detect IE 9? – raffian Jan 16 '14 at 20:14
@raffian Yes it can. It cannot be used to detect later versions than IE10 though (and maybe even not for IE10) – Bart Burg Jan 17 '14 at 09:41
Very clever. My little twist on this was to add an element like
then look for it with jquery like: $(".no-js").length. So, the jquery would be if($(".no-js").length != 0) {[NOT SUPPORT BROWSER CODE]} – skrile Feb 20 '15 at 18:39
Would it be a good idea to add the classes, such as ie8 to the tag in JQuery, such as if (browserVersion === 8) $(html).addClass('ie8') instead of writing those 4 lines of HTML code you have above? – Gregory R. Aug 05 '16 at 15:00
@GregoryR. not if you intend to use it with CSS as well. Since you will get a flash of unstyled content if the JS takes a while to execute. Or it might not work at all if JS encounters some errors – meo Aug 07 '16 at 10:39

Mithun Sreedharan · Answer 2 · 2013-04-22T04:32:56.217

88

This should work for all IE8 minor versions

if ($.browser.msie  && parseInt($.browser.version, 10) === 8) {
  alert('IE8'); 
} else {
  alert('Non IE8');
}

-- update

Please note that $.browser is removed from jQuery 1.9

edited Apr 22 '13 at 04:32

answered Jun 16 '11 at 04:42

Mithun Sreedharan

49,883
70
181
236

AndiDog · Accepted Answer · 2013-06-30T15:50:49.580

79

It is documented in jQuery API Documentation. Check for Internet Explorer with $.browser.msie and then check its version with $.browser.version.

UPDATE: $.browser removed in jQuery 1.9

The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.

edited Jun 30 '13 at 15:50

answered Feb 04 '10 at 18:56

AndiDog

68,631
21
159
205

if I do : if (jQuery.browser.version >= 8.0) { dosomething} I am not sure it will work for version 8.123.45.6 or will it? – salmane Feb 04 '10 at 19:08
13

It is a string, so you should do `if(jQuery.browser.version.substring(0, 2) == "8.") { ... }`. That way it will work with all versions of IE8. – AndiDog Feb 04 '10 at 19:10
13

`jQuery.browser` was deprecated in 1.3 and may be moved to a plugin in the future. [See the jQuery.browser docs](http://api.jquery.com/jQuery.browser) – bendytree Aug 04 '11 at 20:09
Thankfully itt's still around and there's no mention of deprecation, @bendytree – Alastair Jan 09 '13 at 09:07
47

jquery.browser is removed in 1.9 – Mandeep Jain Jan 24 '13 at 09:42
for legacy applications that load a specific version of jquery, using $.browser.msie should be fine! – Terry Kernan Apr 19 '13 at 10:02
OR, you can use jquery migrate https://www.google.com.ar/search?q=jquery+migrate&aq=f&oq=jquery+migrate&aqs=chrome.0.57j60l4j61.1652j0&sourceid=chrome&ie=UTF-8 to add .browser support to your 1.9 – chesscov77 May 02 '13 at 02:09
There are perfectly legitimate reasons to use browser detection. For instance, in cases of visual design or interaction, it was sometimes necessary to wrap elements in blocks so that they would animate or function properly in older versions of IE8. You can't simply do feature detection in some scenarios. Also, including more HTML for other browsers could break layouts. It's much simpler to do something like: `if ($.browser.msie){ $('#target').wrap($div.clone()) }`; but that is just one example, in some cases plugins are broken and need workarounds to show "Loading" messages and the like. – vol7ron Feb 11 '16 at 16:41

TheBuzzSaw · Answer 4 · 2013-04-11T15:56:11.483

56

Don't forget that you can also use HTML to detect IE8.

<!--[if IE 8]>
<script type="text/javascript">
    ie = 8;
</script>
<![endif]-->

Having that before all your scripts will let you just check the "ie" variable or whatever.

edited Apr 11 '13 at 15:56

answered Feb 04 '10 at 19:00

TheBuzzSaw

8,648
5
39
58

4

This syntax also supports "less than" ("[if lt IE 7]") and "greater than" ("[if gt IE 8]") comparators. – spiffytech Dec 05 '12 at 15:27
1

– user227353 Aug 06 '13 at 14:55
1

This is the best way to do it, just redirect to another page which says "Why are you using IE8?" UPGRADE NOW! – Leon Gaban Jul 09 '14 at 20:09
2

By today's standard, I would ask them why they are using IE at all. – TheBuzzSaw Jul 09 '14 at 20:21
This looks like the best solution now since JQuery 2.1.1 does not work with IE8, and therefore cannot be used to detect IE8! – Dave Nov 12 '14 at 14:50

score 27 · Answer 5 · answered Feb 04 '10 at 19:29

27

document.documentMode is undefined if the browser is not IE8,

it returns 8 for standards mode and 7 for 'compatable to IE7'

If it is running as IE7 there are a lot of css and dom features that won't be supported.

answered Feb 04 '10 at 19:29

kennebec

102,654
32
106
127

9

Note that IE9 returns 9. This should be a higher-voted answer, though, now that $.browser is no longer a good solution. Try: `if ((document.documentMode || 100) < 9) { // IE8` – Don McCurdy Aug 03 '13 at 01:12
if(document.documentMode!== undefined && document.documentMode == 8){ ... } – jpprade Jan 16 '15 at 08:10
For some applications where IE8 is still very much in use--namely, US schools--@Don McCurdy's approach is both simple and effective. In tandem with Modernizr it works fine. – cbmtrx May 26 '15 at 19:06
Great answer! This returns version numbers for IE8 through to IE11 (compared to IE5 through to IE9 for conditional comments - if anyone still needs to detect genuine IE7 or IE6 too, you'll need to use conditional comments). Note that [according to the docs](https://msdn.microsoft.com/en-us/library/cc196988(v=vs.85).aspx) it may return `0` while the page is loading - "try to determine the document compatibility mode at a later time" (i.e. after document ready). – user56reinstatemonica8 Sep 15 '16 at 00:30

user56reinstatemonica8 · Answer 6 · 2017-06-25T22:45:05.573

Assuming...

...that it's the crunky rendering engine of old versions of IE you're interested in detecting, to make a style look right in old IE (otherwise, use feature detection)
...that you can't just add conditional comments to the HTML - e.g. for JS plugins that can be applied to any page (otherwise, just do the trick of conditional classes on <body> or <html>)

...then this is probably the best trick (based on this non-jQuery, slightly less flexible variant). It creates then tests for then removes an appropriate conditional comment.

(Conditional comments are ignored in IE10+ 'standards mode' - but that should be fine since IE10+ 'standards mode' doesn't have a crazy rendering engine!)

Drop in this function:

function isIE( version, comparison ){
    var $div = $('<div style="display:none;"/>');

    // Don't chain these, in IE8 chaining stops some versions of jQuery writing the conditional comment properly
    $div.appendTo($('body'));
    $div.html('<!--[if '+(comparison||'')+' IE '+(version||'')+']><a>&nbsp;</a><![endif]-->');

    var ieTest = $div.find('a').length;
    $div.remove();
    return ieTest;
}

Then use it like this:

if(isIE()){ /* runs in all versions of IE after 4 before standards-mode 10 */ }

if(isIE(8)){ /* runs in IE8 */ }

if(isIE(9)){ /* runs in IE9 */ }

if(isIE(8,'lte')){ /* runs in IE8 or below */ }

if(isIE(6,'lte')){ /* if you need this, I pity you... */ }

I'd also suggest caching the results of this function so you don't have to repeat it. For example, you could use the string (comparison||'')+' IE '+(version||'') as a key to store and check for the result of this test in an object somewhere.

Hanzaplastique · Answer 7 · 2013-01-26T17:41:50.137

Note:

1) $.browser appears to be dropped in jQuery 1.9+ (as noted by Mandeep Jain). It is recommended to use .support instead.

2) $.browser.version can return "7" in IE >7 when the browser is in "compatibility" mode.

3) As of IE 10, conditional comments will no longer work.

4) jQuery 2.0+ will drop support for IE 6/7/8

5) document.documentMode appears to be defined only in Internet Explorer 8+ browsers. The value returned will tell you in what "compatibility" mode Internet Explorer is running. Still not a good solution though.

I tried numerous .support() options, but it appears that when an IE browser (9+) is in compatibility mode, it will simply behave like IE 7 ... :(

So far I only found this to work (kind-a):

(if documentMode is not defined and htmlSerialize and opacity are not supported, then you're very likely looking at IE <8 ...)

if(!document.documentMode && !$.support.htmlSerialize && !$.support.opacity) 
{
    // IE 6/7 code
}

koubic · Answer 8 · 2015-07-14T08:58:03.537

If you fiddle with browser versions it leads to no good very often. You don't want to implement it by yourself. But you can Modernizr made by Paul Irish and other smart folks. It will detect what the browser actually can do and put apropriate classes in <html> element. However with Modernizr, you can test IE version like this:

$('html.lt-ie9').each() {
    // this will execute if browser is IE 8 or less
}

Similary, you can use .lt-ie8, and .lt-ie7.

score 3 · Answer 9 · answered Feb 04 '10 at 19:04

3

You should also look at jQuery.support. Feature detection is a lot more reliable than browser detection for coding your functionality (unless you are just trying to log browser versions).

answered Feb 04 '10 at 19:04

jkyle

254
1
5

3

how would you use jQuery.support to detect IE8? – BishopZ Jul 06 '12 at 21:26
if AJAX is what you are looking for then you can use jQuery.support.ajax which returns true if the browser supports AJAX – Jonathan Lin Oct 23 '12 at 10:15
This answer should help: http://stackoverflow.com/questions/1944169/detecting-ie-using-jquery#answer-1944186 – helgatheviking Mar 22 '13 at 23:01

score 3 · Answer 10 · answered Sep 19 '11 at 11:40

You can easily detect which type and version of the browser, using this jquery

$(document).ready(function()
{
 if ( $.browser.msie ){
    if($.browser.version == '6.0')
    {   $('html').addClass('ie6');
    }
    else if($.browser.version == '7.0')
    {   $('html').addClass('ie7');
    }
    else if($.browser.version == '8.0')
    {   $('html').addClass('ie8');
    }
    else if($.browser.version == '9.0')
    {   $('html').addClass('ie9');
    }
 }
 else if ( $.browser.webkit )
 { $('html').addClass('webkit');
 }
 else if ( $.browser.mozilla )
 { $('html').addClass('mozilla');
 }
 else if ( $.browser.opera )
 { $('html').addClass('opera');
 }
});

score 1 · Answer 11 · answered Oct 03 '11 at 14:12

1

Here is the Jquery browser detect plugin to identify browser/os detection.

You can use this for styling purpose after including the plugin.

$("html").addClass($.os.name);
$("body").addClass($.browser.className);
$("body").addClass($.browser.name);

answered Oct 03 '11 at 14:12

Aravind Vel

277
1
5
18

score 0 · Answer 12 · answered Jul 10 '12 at 17:04

You can use $.browser to detect the browser name. possible values are :

webkit (as of jQuery 1.4)
safari (deprecated)
opera
msie
mozilla

or get a boolean flag: $.browser.msie will be true if the browser is MSIE.

as for the version number, if you are only interested in the major release number - you can use parseInt($.browser.version, 10). no need to parse the $.browser.version string yourself.

Anyway, The $.support property is available for detection of support for particular features rather than relying on $.browser.

How do I detect IE 8 with jQuery?

12 Answers12

Linked

Related