How to add CSS Hack specifically for IE10?

孤街醉人 提交于 2019-11-30 01:25:01

问题


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.


回答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.




回答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



来源:https://stackoverflow.com/questions/24320966/how-to-add-css-hack-specifically-for-ie10

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!