css - 背景颜色：继承不适用于 IE 8/9/10 上的输入元素

Question

如果我有一个带有显式背景颜色集的 div，并且其中有一个输入元素，背景颜色设置为“继承”，那么它可以在 Chrome、Firefox 和 Safari 上按预期工作，但在 IE 8 上不起作用， 9 或 10。

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

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

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 的错误

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

带透明背景的输入框在 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

background-color:transparent 不是可以接受的解决方案吗？

Answer 3

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

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