0

I've got the following CSS:

.class1,
.class2:hover,
.class3:disabled { color:red; }

This works in Chrome, Firefox, Safari, IE9 and IE7. Only browser that doesn't support this is IE8.

Is there a way to make it work?

Tnx

Bertjuhh
  • 105
  • 1
  • 1
  • 9
  • Disabled pseudo-class and IE8 are incompatible, hover is buggy and inconsistent at best so the only reliable class that IE7 & IE8 would pick up is .class1, but would bounce over the rule entirely because of the incompatibilities of the other pseudo classes – ggdx Jan 25 '13 at 11:19
  • http://stackoverflow.com/questions/1411044/how-to-change-color-of-disabled-html-controls-in-ie8-using-css – Yury Tarabanko Jan 25 '13 at 11:25
  • 1
    @Daniel that's not entirely true, Hover works fine in IE8 with the only flaw of elements with negative z-index giving trouble on manipulation which i consider seldom enough to ignore that. Nonetheless, both IE7 and IE8 recognize the hover pseudoclass. The disable pseudoclass causes the problem. – Christoph Jan 25 '13 at 11:28
  • @Christoph - I stand corrected! – ggdx Jan 25 '13 at 11:47

1 Answers1

2

IE 8 does not support the pseudoclass :disabled (neither does IE7) altogether. Multiple classes and :hover are supported.

Unlike IE7, IE8 behaves correctly according to §4.1.7 and ignores the entire rule due to the fact that it cannot interpret one of the selectors.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Tnx. That solved my problem. Although something weird. It did work in IE7. The disabled didnt work in IE7, but the css line did. – Bertjuhh Jan 25 '13 at 12:30
  • Yes, this is because IE7 ignores §4.1.7 of the CSS2.1 Spec I mentioned in my answer and uses the style-rule nonetheless, although according to standard it should not. IE8 behaves correctly on that behalf. – Christoph Jan 25 '13 at 13:33