How to apply class only for IE?

Question

I have this class in CSS and i need to change it when its IE. I want to remove padding-bottom. How can I do that?

I don't want to add another CSS file, I want to change only one property in one class.

.container-wrapp{
    float: left;
    position: relative;
    width: 100%;
    padding-bottom:100px;
    height: 100%;
}

I tried this but without success:

<!--[if IE]>
<style type="text/css">
.container-wrapp{
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
}
</style>
<![endif]-->

Which version of IE are you using? IE 10 and up **do not** support conditional comments at all. — Tasos K., Oct 27 '15 at 09:50

Danield · Accepted Answer · 2015-10-27T10:03:42.157

15

For IE10+ you can do the following:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .container-wrapp{padding-bottom:0;}
}

Demo Fiddle (Note that the text is red only in IE 10+)

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .red {
    color: red
  }
}

<div class="red">text</div>

NB: Using hacks like these are generally frowned upon. Use with caution.

edited Oct 27 '15 at 10:03

answered Oct 27 '15 at 09:56

Danield

121,619
37
226
255

@None - Take a look at the demo fiddle. I tested it in IE using the emulator and the text appeared red only in versions IE 10+ – Danield Oct 27 '15 at 10:06
Which version of IE do you have? – Danield Oct 27 '15 at 10:08
IE11 i think so because i have windows 10 installed so i cant find which verison im using – None Oct 27 '15 at 10:12
In the IE Menu bar click Help->About Internet explorer - That will show you the version – Danield Oct 27 '15 at 10:16
my bad...because windows 10 have somehow two ie browsers so its working for ie 11 and 10 – None Oct 27 '15 at 10:18
for IE Edge, use https://stackoverflow.com/questions/43528940/how-to-detect-ie-and-edge-browsers-in-css#answer-43529012 – Rijo May 24 '19 at 06:06

score 1 · Answer 2 · answered Oct 27 '15 at 09:52

1

Create a stylesheet file ie.css and use if AFTER the global style definition this way:

<!--[if IE]>
<link rel='stylesheet' type='text/css' href='ie.css'/>
<![endif]-->

This should work.

answered Oct 27 '15 at 09:52

ojovirtual

3,332
16
21

1

It is deprecated and removed since IE 10: https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx – SAM Nov 22 '17 at 10:25

score 0 · Answer 3 · edited Jul 15 '16 at 09:23

0

Checkout this link How to create an ie only stylesheet , You need to create a separate style sheet for IE.

edited Jul 15 '16 at 09:23

Ismail Farooq

6,309
1
27
47

answered Oct 27 '15 at 09:48

Amir Naeem

570
6
23

Deepak Biswal · Answer 4 · 2015-10-27T10:06:17.623

I think for best practice you should write IE conditional statement inside the tag that inside has a link to your special ie specific style sheet. This HAS TO BE after your custom css link so it overrides the css property. Here is an example:

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Hope this will helps you!

IE 10 and onward no longer support conditional comments. From the MS official website:

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5.

Please see here for more details.

If you desperately need to target ie, you can use this jQuery code to add a ie class to and then use .ie class in your css to target ie browsers.

if ($.browser.msie) {
 $("html").addClass("ie");
}

Can you please verify if it's loading the css `all-ie-only.css` by checking page source? — Deepak Biswal, Oct 27 '15 at 09:59

How to apply class only for IE?

4 Answers4

Demo Fiddle (Note that the text is red only in IE 10+)