background-color：inherit对IE 8/9/10上的input元素不起作用

Question

如果我有一个带有明确背景颜色的div，并且其中有一个输入元素，背景颜色设置为'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中使用background color属性的继承似乎与其他浏览器的实现方式不同。

将背景颜色设置为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;
}