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:

Answer 1

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

Answer 2

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).

Answer 3

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 4

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"