箱陰影鬼影在Internet Explorer 9

試圖用一個盒子陰影Internet Explorer時，我遇到了一些重影，僞像，或者只是一般的wonkiness 9箱陰影鬼影在Internet Explorer 9

的目標是有一組文本區域，即當聚焦時，將突出顯示一個盒子陰影。這是工作沒有任何問題，在大多數瀏覽器，而是通過IE9元素騎自行車的時候，我看到了以下行爲：

Box Shadow Example

在上面的例子中，第三個文本區域失去焦點的第二個文本區域。箱體陰影的左右兩側不會在第三個文本區域中消失，並且不會出現在第二個文本區域中。

重現代碼如下。在第二個和第三個文本區域之間切換焦點時出現問題。

HTML

<label>Text Area 1:</label> 
<textarea class="sampleClass"></textarea><br /><br /> 
<label>Text Area 2:</label> 
<textarea class="sampleClass"></textarea><br /><br /> 
<label>Text Area 3:</label> 
<textarea class="sampleClass"></textarea><br /><br />

CSS

.sampleClass 
{ 
    border:1px solid #ccc; 
} 

.sampleClass:focus 
{ 
    box-shadow: 0px 0px 12px rgba(255,0,0,.8); 
}

的代碼也可以看出here。

這裏究竟發生了什麼？

來源

2012-09-18 sglantz

將它們包裝在一個div http://jsfiddle.net/vfKEp/3/或簡單地給'textarea'顯示：block http://jsfiddle.net/vfKEp/2/似乎可以解決問題。這仍然是奇怪的。 – carpenumidium

-2

我有一個提示......在很多情況下，我們可以使用PIE！

http://css3pie.com/

它「使Internet Explorer中6-9能夠呈現幾個最有用的CSS3裝飾功能。」

它幫了我很多！

來源

2012-09-29 22:28:00 LuAmbros

箱陰影鬼影在Internet Explorer 9

回答

相關問題