34

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

4 Answers 4

55

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

1
  • 14
    Internet Explorer 7 and earlier versions don’t support the value inherit for any properties other than direction and visibility. Dec 25, 2009 at 7:01
16

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

2
  • First time I see :expression. More elegant solution than duplicating markup or using a JS library.
    – user247702
    Apr 17, 2011 at 10:03
  • I love this. It's such an edge case for me that an expression is perfect here.
    – lupos
    Sep 12, 2013 at 20:48
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"

1

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.