如果我有一个明确的背景颜色设置的div和一个输入元素,背景颜色设置为’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中的背景颜色属性的继承似乎与其他浏览器不同。
将背景颜色设置为透明而不是继承似乎可以工作。
您可以在演示:http://jsfiddle.net/audetwebdesign/kTM2f/看到结果
我希望我有更好的解释,但至少我们有一个工作。
Bug与IE8
我刚刚阅读以下相关问题:
Input boxes with transparent background are not clickable in 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; }