admin管理员组

文章数量:1182229

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.

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.

• javascript
• jquery
• css
• internet-explorer-10

Share Improve this question Follow edited Jun 20, 2014 at 6:21 albert 8,15333 gold badges4848 silver badges6464 bronze badges asked Jun 20, 2014 at 6:09 kirantiwary23kirantiwary23 13311 gold badge11 silver badge55 bronze badges 2

• 2 stackoverflow.com/questions/9900311/…? See the second answer down. – Joe Commented Jun 20, 2014 at 6:15
• 1 I think a better question is: why doesn't your styling work in IE10. It would be better to try fix that, than introduce a hack, will likely fail in IE11 and future versions also. – Matthew.Lothian Commented Jun 20, 2014 at 9:20

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 25

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.

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

本文标签： javascriptHow to add CSS Hack specifically for IE10Stack Overflow