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

Question

如果我有一个带有明确背景颜色集的div,并且其中有一个输入元素,背景颜色设置为'inherit',那么它在Chrome,Firefox和Safari上按预期工作,但不适用于IE 8, 9或10.

这是一个说明问题的最小例子:jsbin示例

文本框应具有相同的背景颜色.当您将鼠标悬停在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的错误

我刚读了以下相关问题:

在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

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