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);
}

代码也可以在这里看到.

到底发生了什么？

Answer 1

我有一个技巧...很多情况下我们可以使用 PIE！

http://css3pie.com/

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

这对我帮助很大！