Do you make a separate CSS for IE?_问答_开发者

I'm trying to figure out what is the best solution for me right now.

I was using CSS3 to make some rounded corners and drop shadows, but IE8 did not support it, so I had to use CSS3pie for IE8. Unfortunately, after applying the pie, it seems IE8 is just does not want to look the same as Chrome or FF. Why is IE such a hassle?

Should I just create a new style sheet for IE? or is there a better solution? Is there开发者_StackOverflow some kind of generator where you can convert your Firefox perfected CSS to IE?

Should I just create a new style sheet for IE?

Yes, I think you'll have to add a separate CSS for IE, such as

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../CSS/ie8.css" media="screen" /><![endif]-->

If it doesn't look right in IE8, it must be even worse in IE6! :)

Why is IE such a hassle?

Because the IE guys didn't pay as much attention to web standards, although that has improved.

For IE, yes, and they are, as @Joe R notes, included via conditional comments. So at least there's no corruption, or invalidation, of the mark-up to provide specific support, which is a much improved situation than used to exist with the various css hacks.

In my case I also, so long as there's no overt restriction to the contrary, include a conditional comment somewhere on the page that pops up a modal dialogue linking to various other free browsers (typically Chrome, Firefox, Safari and Opera) and suggesting the users might like to up-grade in order to improve their experience.

Incidentally, I also don't bother trying to get pixel-perfect IE versions. If a client requests it, then fair enough, but normally explaining the cost-per-hour just to givie curvy-corners is enough of an incentive to allow for rectangular boxes in IE, and curves in FF, Chrome etc.

The main reason that IE seems to be such a pain is because, following the installation of IE as a free browser on Windows it peaked at around 90%+ market penetration, Netscape more or less died and, while there were niche browsers around, the majority of the Windows market seemed disinterested in pursuing alternatives. A lack of high market-penetration coupled with low-levels of competition stymied the market, and reduced the incentive to innovate and improve.

Only since, I think, Firefox began to attain adoption rates of 15%+ did the IE team, or the IE management team, pay attention, and pursue improvement. And even then, it seems to have taken 'til the IE9 development process to drive the adoption of standards.

Paul Irish gave quite a nice solution to the IE specific styles a while back.

Basically, it uses the conditional statements to give your body different classes. This way you could just set an IE specific style by doing something like:

.ie6 #element{ /* styles */ }

AFAIK there's no way you can force a browser to be compatible with another browser. So, yes, you could add a separate stylesheet for IE.

Or you can use modernizr and provide alternative for each properties that didn't supported by other browser. This way, you can serve multiple browser with single css file. Of course, this solution won't work if user disable JavaScript on their browser.

As well as CSS3Pie (which you already know is great), you should try modernizr, which will make it easier to adjust your stylesheet for differing browser capabilities.

Also, I refer often to the browser compatibility charts at Quirksmode.org. Very very useful for seeing what CSS (and other browser features) are unsupported or buggy in various browsers.

If this is only about the property needed by CSS3PIE (behavior:), using a single CSS file shouldn't really be a problem (I personally do it all the time) because that property is ignored by other browsers.

If anything, you'll get more overhead in requesting the IE specific CSS file along with the main one, and have a completely different CSS file for IE would be a nightmare to maintain since every change you make, you will have to make it twice. My two cent is to go with a single file.

As a side note, my CSS3PIE layouts look the same in all browsers, so maybe your problem comes from other properties that you are using and not from CSS3PIE itself ? Maybe it would help to ask for a more specific question in regards to what gets broken and let SO have a crack at it.

It's better to avoid multiple css inclusion because in this way you fork the css code and this could raise up some obvious manteinance issues (and slow down the performance because of multiple server requests).

If you really need different css code I first suggest using a strict doctype (xhtml1.0 without XML prologue or HTML5) and if you still have browser differencies I suggest using the html5 boilerplate approach

<!--[if lt IE 7 ]> <body class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

basically you could target a specific IE rule by prepending a class selector