background-color: inherit在IE 8/9/10上不适用于输入元素

Question

如果我有一个设置了显式背景颜色的div，并且里面有一个input元素，背景颜色设置为'inherit'，那么它在Chrome、Firefox和Safari上就能正常工作，但在IE 8、9或10上就不能工作了。

下面是一个说明问题的最小示例：jsbin example

文本框应具有相同的背景色。当您将鼠标悬停在div上时，div的背景颜色会发生变化，输入也会发生变化。当你点击输入的时候，有一个:焦点规则，它覆盖了继承。

Answer 1

通过使用下面的CSS，我得到了你想要的效果：

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: transparent;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

由于某些原因，IE10中的背景色属性继承的实现方式似乎与其他浏览器不同。

将背景颜色设置为transparent而不是inherit似乎是可行的。

您可以在演示中查看结果：http://jsfiddle.net/audetwebdesign/kTM2f/

我希望我有一个更好的解释，但至少我们有一个变通的办法。

IE8的错误

我刚刚读了以下相关的问题：

Input boxes with transparent background are not clickable in IE8

在输入字段上设置background-color: transparent似乎会禁用IE8中的输入字段。

在这种情况下，CSS必须是更明确的版本：

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: #aaa;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container:hover input {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

Answer 2

背景颜色:透明不是可以接受的解决方案吗？

Answer 3

将!important添加到您的规则属性：

input {
  background-color: inherit !important;
  border-width: 0;
}