箱阴影鬼影在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

回答

相关问题