Internet Explorer 9中的Box Shadow Ghosting

Question

在尝试在Internet Explorer 9上使用框阴影时，我遇到了一些重影，瑕疵或一般的尴尬。

目标是拥有一组文本区域，在聚焦时，将以框阴影突出显示。这在大多数浏览器中都没有任何问题，但是当在IE9中循环浏览元素时，我会看到以下行为：

在上面的示例中，第三个文本区域失去了对第二个文本区域的焦点。框阴影的左右两侧不会在第三个文本区域消失，也不会出现在第二个文本区域。

重现的代码如下。在第二个和第三个文本区域之间切换焦点时会出现此问题。

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。

这到底发生了什么？

Answer 1

我有一个提示......在很多情况下我们可以使用PIE！

http://css3pie.com/

它“使Internet Explorer 6-9能够呈现几个最有用的CSS3装饰功能。”

它给了我很多帮助！