Is background-color:inherit expected to work in IE11?

Question

The CSS 'background-color:inherit;' doesn't seem to work with IE11.

Given this HTML:

<a style="background-color:#002538;">
  <button type="button" style="background-color:inherit;" onclick="alert('Hello world!')">Click Me! 
  </button>
</a>

In Chrome you end up with this:

But in IE11 you end up with this:

Other CSS properties like 'padding' seem to work fine with inheritance. Is this expected behavior?

Example to try in both Chrome and IE11 to see the difference

IE version 11.418.18362.0

@Ry- It's actually not that simple unfortunately, IE just has trouble with this particular property on input elements. — Alexander O'Mara, Dec 27 '19 at 18:41

score 3 · Accepted Answer · answered Dec 27 '19 at 18:40

3

While inherit is generally support in IE11, it is not supported on backgrounds for various input elements.

If you just want the background to match that of the parent element, using transparent instead could be a good way to fake it in most cases. Also you shouldn't wrap the button in an a tag since that's not valid even in HTML5, though this is not the cause of your troubles.

<span style="background-color:#002538;">
  <button type="button" style="background-color:transparent;" onclick="alert('Hello world!')">Click Me! 
  </button>
</span>

Otherwise you will have to specify the color on the element itself.

answered Dec 27 '19 at 18:40

Alexander O'Mara

58,688
18
163
171

In case you're like me and didn't realize that having a – dolios Dec 27 '19 at 18:47
Also, contrary to popular belief, background-color:transparent; is not supported by IE11 by default, at least not for – dolios Dec 27 '19 at 18:52

Is background-color:inherit expected to work in IE11?

1 Answers1