How to add CSS Hack specifically for IE10?

Question

I am trying to add css only for iE 10.

Actually my css is working fine in chrome and firefox. But is creating some problem in IE 10.

I tried this code and made ie10.css but it is not working.

<script> 
if (/*@cc_on!@*/false) { 

    var headHTML = document.getElementsByTagName('head')[0].innerHTML; 

headHTML    += '<link type="text/css" rel="stylesheet" href="css/ie10.css">'; 
document.getElementsByTagName('head')[0].innerHTML = headHTML; 
} 
</script>

It is not working. Kindly help.

Solution 1

You can easily track the latest versions of IE (mostly IE 10 and IE 11) using

1. CSS media query hack:

/* 
    #ie10,11 will only be red in MSIE 10, 
    both in high contrast (display setting) and default mode 
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   //-- Put your IE specific css class here 
}

OR

@media screen and (min-width:0\0) {  
    /* IE9 and IE10 rule sets go here */  
}

Read this

Working Example

2. Browser Detection:

if ($.browser.msie && $.browser.version == 10) {
  $("html").addClass("ie10");
}

3. Using script (NOT Tested):

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >

Note : I know document.write is considered bad practice.

Conditional comments (ie10 dropped conditional comments):

if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.

microsoft drop conditional comments in ie10.

Solution 2

Here is the another tricks which I used in my project, you can replace h1 with your class or own CSS

IE10 Only

http://css-tricks.com/ie-10-specific-styles/

Use this JavaScript:

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

Then use this CSS:

html[data-useragent*='MSIE 10.0'] h1 { color: blue; }

Click here for all earlier version for IE

Comments

[Ishan Jain]

@kirantiwary: Your Welcome :)

[G-Cyrillus]

@IshanJain i'm not the dowvoter, but i think the downvote is for the practice. If this is a CSS problem, maybe the method used should rethought. Once you go this way, you end up, like in old time, building a CSS file for each browsers. Beside, CC where meant to filter Ie version, this here has no purpose of that kind :). Regards

[Ishan Jain]

@Joe: Yes, you are right. It's for all latest versions of IE (IE 10+). I already mentioned it with answer. Anyway no problem. Glad to help :)

[lepe]

@IshanJain: to prevent more downvotes, you should state that it should be used only if anything else failed (as commented by GCyrillus). We don't want people to think this is the -only- way to go when fixing IE10 problems. I upvoted your answer as I think its educative enough, but I agree that this should be avoided. Btw, $.browser is deprecated.