Stylesheets compatible with IE 9
I have gotten accustomed to stylesheets that have separate rules for IE and non-IE browsers. For example, I have been using CSS3 Pie to generate roun开发者_StackOverflow社区ded corners and gradients in IE.
The issue is that IE 9 supports rounded corners and gradients, and doesn't need such workarounds anymore. How can I rewrite my stylesheet to ensure that the behaviors only apply to IE 8-, and not to IE 9 ?
Thanks!
Edit: here is an example from the CSS3 Pie site where the rules are redundant for IE 9: http://css3pie.com/demos/tabs/
The usual approach is to use conditional comments and a separate patch stylesheet for each version of it:
<!--[if IE 7]><style type="text/css">@import "ie7-kludges.css";</style><![endif]-->
<!--[if IE 8]><style type="text/css">@import "ie8-kludges.css";</style><![endif]-->
<!--[if IE 9]><style type="text/css">@import "ie9-kludges.css";</style><![endif]-->
That way you can use standard CSS in your main stylesheet and then layer on whatever kludges and nonsense you need to make each version of IE behave itself. Each version of IE usually needs different kludges so I put them in different stylesheets.
See some of the answers here How does one target IE7 and IE8 with valid CSS?
and here IE8 css selector
Hard to tell you how to rewrite something if we can't see the original. In general, the common best-practice for dealing with IE is to use IE's conditional comments in some form or another. What I typically do is via said comments write out the body tag with a class matching the particular version of IE. So, for IE7, I may end up with this:
<body class="ie7">
That way, in my CSS, I can use specificity to give ie7 it's own style without having to resort to hacks nor having to manage styles across multiple css files.
.something {...style for good browsers...}
.ie7 .something {...fix IE 7 here...}
加载中,请稍侯......
精彩评论