37

Possible Duplicate:
How do I do IE conditionals in CSS?

How can I apply the rules below to IE only?

.abc {

float:left;
height:0;
margin:0 10px;
width:0;

/*Apply these rules for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
Community
  • 1
  • 1
Mayur
  • 3,073
  • 8
  • 41
  • 55

4 Answers4

29

In browsers up to and including IE9, this is done through conditional comments.

<!--[if IE]>
<style type="text/css">
  IE specific CSS rules go here
</style>
<![endif]-->
Pekka
  • 431,103
  • 135
  • 960
  • 1,075
  • 18
    This will not work for IE10 and later. – Frederik Voordeckers Nov 21 '14 at 14:29
  • 2
    this is not the answer anymore – abzarak Sep 09 '15 at 13:56
  • 1
    @abzarak then provide a new, correct one that the OP can mark as accepted instead of this one – Pekka Sep 09 '15 at 14:36
  • @Pekka웃 there are true answers in this page to be accepted. or u can update ur answer. please check this out : http://stackoverflow.com/questions/18907131 – abzarak Sep 09 '15 at 15:04
  • 1
    @Pekka웃 Your updated answer is better than old one BTW. but the best approach is browser css compatibility check. I will vote up as soon as u updated your answer. This is a good article : https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ – abzarak Sep 09 '15 at 15:16
23

A good way to avoid loading multiple CSS files or to have inline CSS is to hand a class to the body tag depending on the version of Internet Explorer. If you only need general IE hacks, you can do something like this, but it can be extended to be version specific:

<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

Now in your css code, you can simply do:

.ie .abc {
  position:absolute;
  left:30;
  top:-10;
}

This also keeps your CSS files valid, as you do not have to use dirty (and invalid) CSS hacks.

DASPRiD
  • 1,623
  • 11
  • 15
18

A fast approach is to use the following according to ie that you want to focus (check the comments), inside your css files (where margin-top, set whatever css attribute you like):

margin-top: 10px\9; /*It will apply to all ie from 8 and below */
*margin-top: 10px; /*It will apply to ie 7 and below */
_margin-top: 10px; /*It will apply to ie 6 and below*/

A better approach would be to check user agent or a conditional if, in order to avoid the loading of unnecessary CSS in other browsers.

JohnDel
  • 2,257
  • 8
  • 33
  • 62
5

I prefer using a separate file for ie rules, as described earlier.

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

And inside it you can set up rules for different versions of ie using this:

.abc {...} /* ALL MSIE */
*html *.abc {...} /* MSIE 6 */
*:first-child+html .abc {...} /* MSIE 7 */
angryobject
  • 408
  • 2
  • 7