Css 背景色：继承不'；t在IE 8/9/10上操作输入元素

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

下面是一个说明问题的简单示例：

---

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

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

我能够通过使用以下CSS获得您想要的效果：

div.container{
利润率：50像素；
填充：10px；
背景色：#aaa；
}
div.container输入{
背景色：透明；
边框宽度：0；
}
分区容器：悬停{
背景颜色：黄色；
}
div.container输入：焦点{
背景色：白色；
}

出于某种原因，IE10中带有background color属性的继承的实现方式似乎与其他浏览器不同

将背景色设置为

transparent

而不是

inherit

似乎有效

您可以在演示中看到结果：

我希望我能有一个更好的解释，但至少我们有一个解决办法

IE8的漏洞

我刚刚读到以下相关问题：

在输入字段上设置背景色：透明似乎会禁用IE8中的输入字段

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

div.container{
利润率：50像素；
填充：10px；
背景色：#aaa；
}
div.container输入{
背景色：#aaa；
边框宽度：0；
}
分区容器：悬停{
背景颜色：黄色；
}
div.container：悬停输入{
背景颜色：黄色；
}
div.container输入：焦点{
背景色：白色；
}

添加一个

！重要信息

到您的规则属性：

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

---

这是一个好的！一个微妙的堆叠顺序跨浏览器问题…这已经够烦人的了。仅供参考，我在IE 11上也看到了这一点，但不在边缘。另一个突出问题的JSFIDLE：