Box Bóng Bóng ma trong Internet Explorer 9

Question

Tôi đang gặp một số hiện tượng bóng ma, artifacting, hoặc wonkiness chỉ chung khi cố gắng sử dụng một bóng hộp trên Internet Explorer 9.

Mục đích là để có một nhóm các lĩnh vực văn bản, mà khi được lấy nét, sẽ được đánh dấu bằng bóng đổ hộp. Đây là hoạt động mà không cần bất kỳ vấn đề trong hầu hết các trình duyệt, nhưng khi đi xe đạp qua các yếu tố trong IE9, tôi thấy những hành vi sau đây:

Trong ví dụ trên, vùng văn bản thứ ba mất tập trung vào vùng văn bản thứ hai. Các cạnh bên trái và bên phải của bóng hộp không biến mất trên vùng văn bản thứ ba và không xuất hiện ở phần thứ hai.

Mã để tạo lại bên dưới. Sự cố xuất hiện khi chuyển tiêu điểm giữa vùng văn bản thứ hai và thứ ba.

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

Mã này cũng có thể được nhìn thấy here.

Chính xác những gì đang xảy ra ở đây?

Answer 1

Tôi có mẹo ... trong nhiều trường hợp, chúng tôi có thể sử dụng PIE!

http://css3pie.com/

nó "làm cho trình duyệt Internet Explorer 6-9 khả năng render nhiều các tính năng trang trí CSS3 hữu ích nhất."

Nó đã giúp tôi rất nhiều!