IE7 CSS inherit problem

Question

I have set some style for h2 tags (color, font-size, etc.), but when I put "A" tag inside, then style becomes as link. My html:

<h2>
  <a class="no-decor" href="http://localhost/xxx/"&gt;Link&lt;/a&gt;
</h2>

So, as You can see, I've created "no-decor" class. It should inherit h2's style for "a" tag.

a.no-decor {
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  text-decoration:inherit;
}

On Firefox everythig is ok, but IE still shows tag "a" style (underline text-decoration and blue color). I know, I can set some style for "h2 a", but maybe somehow it is possible to force work CSS inherit values on IE7?

P.S. On IE6 doesn't supports too.

P.P.S. There is some example in same way: http://www.brunildo.org/test/inherit.html

Answer 1

A bug's a bug and there's nothing much you can do, short of workarounds.

There's a test for inherit support here.

You can also try to use a script like ie7-js, which "is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser"

Answer 2

It might be choking on validation: the CSS 2.1 specification states that text-decoration property does not support inherit.

Answer 3

No, IE has never supported 'inherit' for any property - sorry. This is only fixed in the forthcoming IE8.

Whilst you could use a JavaScript fix to copy the properties from 'h2' to 'a', it's probably easiest just to apply the same styling rule to both elements:

h2, h2 a {
    font: something;
    color: black;
    text-decoration: none;
}

You don't need to set 'inherit' on text-decoration anyway, because decoration doesn't inherit from a parent into a child: the underline effect is on the parent and goes through the child; the child cannot remove it (modulo IE bugs). 'text-decoration: none' on the child is the right thing, unless you want potentially two underlines...