9中的框影鬼影

Question

当我尝试在Internet 9上使用一个盒子阴影时，我正在经历一些幽灵，艺术，或只是一般的呆板。

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

​

​

在上面的例子中，第三个文本区域失去了对第二个文本区域的关注。框影的左侧和右侧不会消失在第三个文本区域，也不会出现在第二个文本区域。

下面是要复制的代码。当焦点在第二和第三文本区域之间切换时，会出现此问题。

<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

我有个提示..。在很多情况下，我们可以使用馅饼！

http://css3pie.com/

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

这对我有很大帮助！