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

Volker E. · Accepted Answer · 2015-12-06 00:56:42Z

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

edited Dec 6, 2015 at 0:56

Volker E.

6,07411 gold badges50 silver badges66 bronze badges

answered Feb 4, 2009 at 12:18

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jitendra Vyas Over a year ago

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

Carsen · Accepted Answer · 2011-04-06 19:13:42Z

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

answered Apr 6, 2011 at 19:13

Carsen

4194 silver badges11 bronze badges

2 Comments

user247702 Over a year ago

First time I see :expression. More elegant solution than duplicating markup or using a JS library.

lupos Over a year ago

I love this. It's such an edge case for me that an expression is perfect here.

yoavf · Accepted Answer · 2009-02-04 12:12:19Z

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"

answered Feb 4, 2009 at 12:12

yoavf

21.3k9 gold badges39 silver badges38 bronze badges

Comments

Kld · Accepted Answer · 2013-11-19 09:10:33Z

1

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

answered Nov 19, 2013 at 9:10

Kld

7,1183 gold badges39 silver badges50 bronze badges

1 Comment

WynandB Over a year ago

As mentioned in this comment on 25 Dec '09.

Collectives™ on Stack Overflow

IE7 CSS inheritance does not work

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related