상자 그림자 잔상 9

Question

이 좀 대충, 아티팩트, 아니면 그냥 일반 wonkiness가 발생하고있다 9. 목표는 텍스트 영역의 그룹을 가지고있다

, 그 초점이 맞춰지면 상자 그림자로 강조 표시됩니다. IE9의 요소를 순환 할 때 대부분의 브라우저에서 문제없이 작동되지만, 나는 다음과 같은 동작을 참조하십시오

위의 예에서를, 세 번째 텍스트 영역은 두 번째 텍스트 영역에 포커스를 잃었을. 상자 그림자의 왼쪽과 오른쪽은 세 번째 텍스트 영역에서 사라지지 않고 두 번째 텍스트 영역에는 나타나지 않습니다.

코드는 다음과 같습니다. 두 번째 및 세 번째 텍스트 영역간에 포커스를 전환 할 때 문제가 나타납니다.

HTML 코드는 here를 볼 수 있습니다

.sampleClass 
{ 
    border:1px solid #ccc; 
} 

.sampleClass:focus 
{ 
    box-shadow: 0px 0px 12px rgba(255,0,0,.8); 
} 

<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.

정확히 여기서 무슨 일이 벌어지고 있습니까?

Answer 1

팁이 있습니다. 많은 경우 PIE를 사용할 수 있습니다!

http://css3pie.com/

그것은 "가장 유용한 CSS3 장식 기능의 여러 가지 렌더링의 인터넷 익스플로러 6-9 할 수 있습니다."

많은 도움이되었습니다.