5

尝试在 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);
}

代码也可以在这里看到。

这里到底发生了什么？

4

1 回答 1

-2

我有一个小窍门……在很多情况下，我们可以使用 PIE！

http://css3pie.com/

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

这对我帮助很大！

于 2012-09-29T22:28:00.137 回答