Apply CSS rules if browser is IE [duplicate]
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 ru开发者_开发问答les for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
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]-->
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.
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.
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 */
加载中,请稍侯......
精彩评论