Detect IE using html in IE10

Question

I have this portion of syntax

<!DOCTYPE html>
<!--[if IE]> <html lang="en" class="ie">  <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

it works fine for IE 8 and IE 9 but not for IE. Any suggestions?

I have some css that I want to apply when the browser is IE in general.

example:

.ie #nav ul#top-nav li.top-nav-item a.top-nav-link {
                width: 167px;
            }

EDIT I have a TypeKit which is not working in IE at the moment. I want to do some css tweaking so my page looks fine on IE until I find a solution for the TypeKit issue

@melaniciaUK, it is not a duplicate as it has nothing to do with `IE10` — Rami Alshareef, Jul 14 '14 at 14:57
@thirtydot I have some fontkit not working at the moment on IE, so I need to fix some font spacing and other stuff till I found solution for the fontkit — Rami Alshareef, Jul 14 '14 at 14:58

Niels Keurentjes · Answer 1 · 2014-07-14T15:04:41.070

6

You're probably expecting it to trigger for IE10 and IE11, and it won't, since support for conditional comments was completely removed in IE10.

http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx:

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5. This means that Conditional Comments are now treated as regular comments, just like in other browsers.

Since IE10+ are really extremely standards compliant browsers there shouldn't ever be a reason anymore to do browser sniffing like this. If however for some mysterious reason you really really need to patch in IE-specific behaviour, you should be able to do so by using Javascript to parse navigator.appVersion for occurrences of Trident/. It's not entirely reliable of course, like any kind of sniffing.

For better and more reliable browser-specific behaviour consider including Modernizr to specifically test for certain features.

edited Jul 14 '14 at 15:04

answered Jul 14 '14 at 14:51

Niels Keurentjes

41,402
9
98
136

Should I use `js` type of solution then? – Rami Alshareef Jul 14 '14 at 14:52
@Rami.Shareef What exactly are you trying to accomplish. IE 10 and 11 are a lot better at rendering CSS than previous versions. Are styling fixes specific to those versions really needed? – War10ck Jul 14 '14 at 14:55
@rami.shareef With the support conditional removed from IE10 and I assume IE11 (never saw anything about them bringing it back) javascript or jquery is going to be the only easily feasible way to do what you're looking to do. IE10 and 11 render pages pretty in line with the standards for CSS and html now though so I'd go looking for a CSS method to solve your problem first before implementing javascript. Unless you're already using javascript in the page because it'll be a simple extra function to add that won't really slow anything down. – Jem Jul 14 '14 at 14:57
@Rami.Shareef elaborated my answer a bit, but seriously like everyone is saying you just shouldn't bother with detecting IE in general. – Niels Keurentjes Jul 14 '14 at 14:58

score 2 · Answer 2 · answered Jul 14 '14 at 14:52

2

The  will not work for IE 10+. Microsoft removed this functionality from the IE browser starting in version 10.

Reference:

Conditional Comments

answered Jul 14 '14 at 14:52

War10ck

12,387
7
41
54

score 1 · Answer 3 · answered Jul 14 '14 at 14:52

The document can only have one html tag, so the IE only is being overwritten by the specific version tag.

You need to add the ie class to the version specific tags.

<!--[if IE 8 ]>    <html lang="en" class="ie8 ie">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9 ie">    <![endif]-->

Also, support for conditional comments was removed in IE10+.

score 0 · Answer 4 · answered Jul 14 '14 at 14:54

0

I believe that the newer versions of IE ( 10+ ) don't have the ability to use html to detect the browser version. Here is a small snippet of javascript that will add a class to the html tag so you can namespace your CSS for IE10. I'm sure a few tweaks and it will work for IE11 as well...

 if (navigator.userAgent.indexOf("MSIE 10") > -1) {
     $("html").addClass("ie10");

 }

I hope this helps :)

answered Jul 14 '14 at 14:54

Christopher Harris

112
4

I'd recommend parsing `appVersion` instead of `userAgent` - it's spoofed less often. And IE11 has changed its entire user agent syntax, who knows what they're going to do in IE12. – Niels Keurentjes Jul 14 '14 at 15:01

score 0 · Answer 5 · answered Jul 16 '14 at 08:02

0

   <!--[if !IE]><!--><script>  
   if (/*@cc_on!@*/false) {  
    document.documentElement.className+='ie10';  
   }  
   </script><!--<![endif]-->

This is used to detect IE 10 browser

answered Jul 16 '14 at 08:02

user3218194

448
4
15

Detect IE using html in IE10

5 Answers5