1

*** Updated *** Great discussion everyone, again thanks for the input I just want to share the information with other developers/programmers and talk about the possible solutions.

I've come up with another clever little trick that could work as well.

It's an old way of going server-side/client-side in asp, that can still be done in .NET (not that this is proper, but in the end 'they' just want it to work)

Here it is:

enter image description here

This is more of a discussion than a question, but does any know of some specific IE 9 CSS hacks. I don't want to use a separate style sheet, but was wondering if there we any IE 9 hacks out yet.

For example you can do the following for the other IE's

_CSS_thing {css} /** IE 6 **/

*CSS_thing {css} /** IE 7 **/

.CSS_thing {margin-top:0px/0\} /** IE 8 -- could be wrong on the /\ format is one of those ways don't really use that one. **/
TylerH
  • 20,799
  • 66
  • 75
  • 101
Kaos
  • 754
  • 1
  • 8
  • 13
  • 1
    Just use a seperate stylesheet and a conditional . Save yourself the hassle and let your stylesheets be legible by people who don't know about the weird hacks and bug-abuses. – Bazzz Apr 21 '11 at 14:35
  • 1
    I haven't tested anything in IE9 yet, so it makes me sad to see we still apparently need to hack IE? Is your CSS working in other browsers or is this just a "theoretical" question? – Wesley Murch Apr 21 '11 at 14:36
  • @Bazz I'd rather not use a separate style sheet at this point. The conditional statements could work in this case. – Kaos Apr 21 '11 at 14:46
  • @Bazz From what I'm seeing so far everything that is ok from IE6-IE8 works great, then when I test it in IE9 everything is off a few pixels. I have a bad feeling that IE9 is gonna be the new IE6, since they already come out with IE 10 platform review. – Kaos Apr 21 '11 at 14:47
  • sounds like a conditional that tests for `IE` and then does a CSS reset, and then a conditional for `lte IE 8` that includes or adds some additional styles. – Bazzz Apr 21 '11 at 14:58
  • -1 for using browser detection, you don't need it... EVER so don't use it. There is no need for such hacks and they should be avoided whenever possible – Mgetz Jan 15 '14 at 02:49

2 Answers2

3

Rather than using hacks specifically for IE, why don't you use conditional comments instead? Check out the HTML5Boilerplate and how they deal with IE-specific styles.

More specifically, you can use conditional comments to add classes to the <html> or <body> elements, and then in your stylesheet, use those classes to target styles that fix specific IE problems or differences.

Here's the excerpt from the HTML5Boilerplate project that does this:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

The comments will cause IE to use a particular version of the <html> tag that has a class in it that corresponds to a particular version of IE. Using this same concept, you can easily extend to IE9, or to have other classes added to deal with IE-specific behaviors.

cdeszaq
  • 30,869
  • 25
  • 117
  • 173
  • @cdezaq for what is causing the issue this might be the solution..but only for this specific problem I have. – Kaos Apr 21 '11 at 14:48
  • 1
    I like this idea, though haven't used it production yet, the only concern I have is the amount of "lookbacks" a parser would have to do as it can only "fail" selectors having traversed right to the top of the DOM tree, is there any reports/ideas on the performance of this yet? – clairesuzy Apr 21 '11 at 14:48
  • 1
    @Kaos, By having an extra class added to the `` element in the problematic IE browser, you can apply any style corrections that that browser can use without impacting ANY other browsers. I'm not sure I see how this solution would not apply to just about _any_ style difference problem between versions of IE and other browsers. Could you perhaps explain what you mean? – cdeszaq Apr 21 '11 at 14:52
  • @clairesuzy: I remember reading about that framework and they deliberately moved the classes from `` to `` for some reason I can't recall, so there may possibly be something to it or it's just vanity/convenience. *EDIT*: Nevermind, I need coffee :p – Wesley Murch Apr 21 '11 at 14:52
  • 1
    @clairesuzy, I don't have any metrics myself, but hopefully, you don't need too many "fixes" to deal with IE. If the css classes worry you from a performance standpoint, you could always switch the classes to be IDs instead, but that limits your ability to apply an IE-Fix class to other elements on the page that you perhaps don't want to have to have a complex selector to style them. – cdeszaq Apr 21 '11 at 14:56
  • @Madmartigan, they moved - from `body` to `html` -because there was less potential for clashes with CMS added body classes, and the only other HTML class "`no-js`" is also related (HTML5 Boilerplate/Modernizr) I think.. once on the HTML element it also stopped another bug where by conditionally called sheets (traditonally after the main CSS) could block downloads, slow page rendering and the `FOUC` - IIRC anyway, to me it solves more than causes ;) – clairesuzy Apr 21 '11 at 14:59
  • @clairesuzy: Well I also realized that we need to target `` and `` specifically on occasion so there's another reason. Didn't realize that other stuff though, thanks for sharing it. – Wesley Murch Apr 21 '11 at 15:02
  • 1
    @cdeszaq, very true I always use hacks or conditional sheets sparingly anyway - so that wouldn't change.. it's not the classes.. it's the look back time required to match selectors, but if there's only a few, I guess the pro's do outweigh the concerns here :) – clairesuzy Apr 21 '11 at 15:03
0

I don't know of any CSS hacks to target IE9. Sorry.

You're stuck with conditional comments.

The real question is: why do you think you need to provide IE9 with different styles?

IE9 is a mostly standards compliant browser, unlike its predecessors.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • @thirtydot IE 9 is not taking styles that work fine from IE6, IE7, and IE8. Unless they have to still fix some things it is not handling styles that it's predecessors handled fine. – Kaos Apr 21 '11 at 14:44
  • 2
    @Kaos: then you might have coded to some of IE6–8’s bugs. Does your old CSS also work in Firefox and Safari/Chrome? – Paul D. Waite Apr 21 '11 at 14:50
  • @Paul D. Waite there are no css hacks/bugs for this specific issue. In fact it was a redesign so it would be compliant with all IE's and all browsers. – Kaos Apr 21 '11 at 14:57
  • @Kaos: and you’re seeing different results with the same HTML and CSS in IE 9, compared to IE 8 and Firefox/Safari? – Paul D. Waite Apr 21 '11 at 14:59
  • @Kaos: What *is* the issue.. ? I feel confident that trying to provide IE9 with different rules is the wrong thing to do. – thirtydot Apr 21 '11 at 15:00
  • @thirtydot sorry I cannot provide an example. It is just the way we render a div/link and the text isn't falling in place for IE 9 only – Kaos Apr 21 '11 at 15:19
  • @Kaos: There's probably a way to rework what you're doing in a way that will work in all modern browsers. To put it more harshly: you're probably *doing it wrong*. – thirtydot Apr 21 '11 at 15:28
  • @thirtydot, I agree with 100%. Since it has already been reworked and works in all browsers other than IE 9 (including old Safari, Opera, Firefox, Firefox 4.0, IE6-IE8) I'd say the problem is with IE9. There is no standard that will work in all browsers, but rework is always an option that should get you very very close. That's why we have reworked it now to get it close with all the other browsers. – Kaos Apr 21 '11 at 15:34