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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (56)

如果我有一个带有明确背景颜色集的div和一个里面的input元素,背景颜色设置为'inherit',那么它在Chrome,Firefox和Safari上按预期工作,但在IE 8上不起作用, 9或10。

下面是一个说明问题的简单例子jsbin example

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

提问于
用户回答回答于

我能够通过使用下面的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;
}
用户回答回答于

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

扫码关注云+社区