2012-09-18 22 views
5

estoy experimentando algún efecto fantasma, artifacting, o simplemente wonkiness general, cuando se trata de utilizar una sombra caja en Internet Explorer 9.Shadow Box efecto fantasma en Internet Explorer 9

El objetivo es tener un grupo de áreas de texto, que se cuando se enfoca, se resaltará con una sombra de cuadro. Esto está funcionando sin ningún problema en la mayoría de los navegadores, pero al moverse por los elementos de IE9, veo el siguiente comportamiento:

Box Shadow Example

En el ejemplo anterior, la tercera área de texto pierde el foco a la segunda área de texto. Los lados izquierdo y derecho de la sombra de la caja no desaparecen en la tercera área de texto y no aparecen en la segunda.

El código para reproducir está debajo. El problema aparece cuando se cambia el foco entre el segundo y el tercer área de texto.

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

El código también se puede ver here.

¿Qué es exactamente que está pasando aquí?

+5

envolviéndolos en un div o dar http://jsfiddle.net/vfKEp/3/ pantalla simplemente 'textarea': Bloque http://jsfiddle.net/vfKEp/2/ parece resolver el problema. Esto todavía es extraño. – carpenumidium

Respuesta

-2

Tengo un consejo ... en muchos casos podemos usar PIE!

http://css3pie.com/

que "hace Internet Explorer 6-9 capaz de hacer varias de las características más útiles de decoración CSS3."

¡Me ayudó mucho!