IE7 CSS inheritance does not work

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/">Link</a>
</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

No, IE has never supported inherit for any property - sorry. This has been fixed in >= 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...

Answer 2

Internet Explorer <= 7 versions don’t support the value inherit for any properties other than direction and visibility.

Answer 3

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 4

try

a.no-decor{
  color:inherit;
  //color:expression(this.parentNode.currentStyle['color']);
  text-decoration:none;
}

That'll get rid of your blue color and the underline. You could use a similar expression for the underline, but you'd be better off just using text-decoration:none since that's all an inherited text-decoration is gonna give you anyhow and no need to use expressions when not absolutely necessary (you'll take a performance hit when using expressions).