如何为IE10专门添加CSS Hack？

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.

Answer 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 .

Answer 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