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

【问题标题】：background-color: inherit doesn't work on input element on IE 8/9/10背景颜色：继承不适用于 IE 8/9/10 上的输入元素
【发布时间】：2013-07-03 19:08:03
【问题描述】：

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

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

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

【问题讨论】：

这个不错！一个微妙的堆叠顺序跨浏览器问题...
这很烦人。仅供参考，我在 IE 11 上也看到了这一点，但在 Edge 上没有。另一个突出问题的jsfiddle：jsfiddle.net/ctn5j8m3/1

标签： css internet-explorer internet-explorer-8

【解决方案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 的错误

在输入字段上设置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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：