How to apply IE11 specific css

Question

I am new user for IE11. I want to integrate one IE11 specific css in my extjs application. I have searched a lot. If anybody is having any idea , please let me know..I am having heavy deadline on this. Thanks in advance.

score 1 · Accepted Answer · answered Apr 01 '14 at 13:41

    applyIEFont = function() {
        var iev=0;
        var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
        var trident = !!navigator.userAgent.match(/Trident\/7.0/);
        var rv=navigator.userAgent.indexOf("rv:11.0");

        if (ieold) iev=new Number(RegExp.$1);
        if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
        if (trident&&rv!=-1) iev=11;

        if(iev == 11 || iev == 10) {
            $('.menuCaption').css({ font: 'normal 34px arial, "SegoeUi"'});
        }
    };

    setInterval(applyIEFont, 300);
    $(document).ready(applyIEFont);

look this code. Conditional comments doesn't work in ie11, so you have to do it with js

then change this row $('.menuCaption').css({ font: 'normal 34px arial, "SegoeUi"'}); with $().css({ margin: 'left/right...'}); — olqmin, Apr 01 '14 at 13:43

score 1 · Answer 2 · edited Apr 01 '14 at 13:48

1

Your best bet would be to detect IE 11 and apply CSS classes accordingly. Something like this (using jQuery):

$(window).load(function(){
  if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
  }
});

You can apply that class to any element that you know you have IE 11 exceptions then just use the class in your CSS like so:

body.ie11 { }

edited Apr 01 '14 at 13:48

Albzi

15,431
6
46
63

answered Apr 01 '14 at 13:43

Evidica

1,464
1
14
19

1

With ExtJS 4.2.2 (and above) you can also use [`Ext.isIE11`](http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext-property-isIE11) to detect IE11. – matt Apr 01 '14 at 14:02

score 1 · Answer 3 · answered Apr 01 '14 at 14:01

Here is a two steps solution here is a hack to IE10 and 11

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers

and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript

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

and this HTML tag

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

and now you can write your CSS code like this

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

for more information please refer to this websites,number one:wil tutorail

number two:Chris Tutorial

thanks for your humble help..But I want to apply css only for IE11..It is applying css on IE10 also...Any solution for that? -k.shree — Curious_k.shree, Apr 02 '14 at 10:15
Actually As I said before,this could be done by a trick,you will use the first method for applying styles to IE11,but by using this method the styles will be apply to IE10 to,but after using the second method you can override the styles which,you have been applied to IE10,this is like excluding the IE10 when you are using this method.this is kind of tricky. — Hbirjand, Apr 02 '14 at 10:23

How to apply IE11 specific css

3 Answers3