CSS Problem with If IE's
I'm looking for a quick way of displaying different css codes using a simple "if statement kind of thing".
At the moment I hav开发者_运维问答e been using:
* html #mydiv
For switching things for IE6. But I was wondering if their was anymore little hacks like that for dealing with IE7, IE8 etc.
I don't want to import different stylesheets just switches in the actual .css document itself.
Any help would be great. Thanks!
By the way, conditional comments are cleaner for IE hacking; some CSS hacks make for invalid CSS. This page has a wide range of hacks for different versions of IE: http://www.webdevout.net/css-hacks
Dedicated stylesheets included in conditional comments are the least obtrusive way of doing it (other than dropping IE6 support altogether), anything else is basically a hack. The only reason I can think of for not using them is when you can change the CSS, but not the HTML. In that case, you might want to experiment with media queries, but be prepared for a wild ride (and lots of testing against various browsers).
If you're doing it right, you shouldn't need to provide different rules for IE8.
If your site needs just a few IE6 (are you sure you care?) specific fixes, it's acceptable to just stick a section at the end of your CSS file using the Star HTML hack:
/* IE6 fixes */
* html p { font-size: 5em }
* html #header { margin-left: 100px }
Otherwise, you should really just use conditional comments to import separate stylesheets:
<!--[if IE 7]>
<![endif]-->
This is clean, easy to do, and easy to understand.
Another option that you might like better is the way HTML5 Boilerplate does it:
<!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
Then, you can write inside your single CSS file:
.ie6 #header { color: black }
.ie7 #header { color: red }
.ie8 #header { color: blue }
The worst choice is to scatter all over your stylesheet these types of things:
IE6:
* html p {font-size: 5em; }
IE7:
*+html p { font-size: 5em; }
IE8 (see: http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode):
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
(may also target IE7)
See here for a good summary of different hacks: http://paulirish.com/2009/browser-specific-css-hacks/
加载中,请稍侯......
精彩评论