背景色：繼承不輸入元素對IE 8/9/10

工作，如果我有一個明確的背景色設置一個div，和裏面的輸入元素，背景色設置爲「繼承」，那麼它適用於Chrome，Firefox和Safari的預期，但在IE 8，9不工作，或10背景色：繼承不輸入元素對IE 8/9/10

這裏是一個說明該問題的小例子：jsbin example

文本框應具有相同的背景顏色。當您將鼠標懸停在div上時，div的背景顏色會發生變化，輸入也會發生變化。當你點擊輸入時，有一個：覆蓋繼承的焦點規則。

2013-07-05 Elbin

這是一個很好的！微妙的堆疊順序跨瀏覽器問題... –

這是非常煩人的。僅供參考我也看到這在IE 11上，但不是在邊緣。另外的jsfiddle突出問題：https://jsfiddle.net/ctn5j8m3/1/ – romellem

我能得到您使用以下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; 
}

來源

2013-07-05 16:39:51

不會背景色：透明是可接受的解決方案？

來源

2013-07-05 16:11:26

是行之有效 –

添加!important到您的規則屬性：

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

來源

2017-08-24 10:58:22 anonym

背景色：繼承不輸入元素對IE 8/9/10

回答

相關問題