Specify CSS properties for the IE only in the CSS file

Question

Actually I need to specify this property

margin-left:-20px;

only for the IE-11 and the rest of the properties for all browsers in CSS file

.navigator li a span {
    display: block;
    float: right;
    width: 80px;
    height: 50px;
    margin-right: -10px;
    margin-left:-20px;
    }

Is there a way to do that, as I tried many solutions and didn't work
Thanks in advance!

Answer 1

It sounds like your problem could be solved in some other way than browser-conditional styles, please try that first, but in any case:

For IE 10 and 11, you can use this:

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

Note though, that it will recognize both IE 10 and 11.

source: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

You may also want to take a look at this:

http://marxo.me/target-ie-in-css/

---

For IE 9 and lower, you can use this:

You create a separate stylesheet for that, and then you use this to include that in your HTML.

source: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

For example, if you wanted to target IE 7, you would do this. You can just change the version number to what you will.

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

And then you can also target lower or higher versions than a specific version:

Lower than IE 8 and IE 8:

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Higher than IE 8:

<!--[if gt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Note that you can use lt, lte, gt or gte.

Answer 2

I wrote is very simple and only supported by IE 11+

<style type="text/css">
  _:-ms-fullscreen, :root .msie11 { color: blue; }
</style>

// or you can try this

<style>
  @media all and (-ms-high-contrast:none)
    {         
      *::-ms-backdrop, .foo { color: red } /* IE11 */
    }
</style>

and of course the div...

<div class="msie11">
    This is an Internet Explorer 11 and greater CSS Hack
<div>

So the text shows up in blue with internet explorer 11 and greater. Have fun with it.

for more reference you can look around with given link

Reference