CSS Opacity không làm việc trong IE11

Question

Tôi đang cố gắng để làm cho background-color của một tr đục với CSS này:

.faded{ 
    background-color: red; 
    height: 100px; 
    opacity: 0.4; 
    filter: alpha(opacity=50); 
} 

Đây là HTML thử nghiệm của tôi:

<table> 
    <tr class="faded"> 
     <td><div>testtesttesttestt</div></td> 
     <td><div>testtsttesttesttt</div></td> 
    </tr> 
</table> 

Tất cả mọi thứ hoạt động tốt trong IE9 , 10 FF24 Chrome 31+, nhưng không có trong IE11. Hãy nhớ rằng tôi không quan tâm đến nội dung của các hàng trong bảng, chỉ có độ mờ nền. Ảnh chụp màn hình và Jsfiddle bên dưới.

IE10:

IE11:

http://jsfiddle.net/ZB3CN/6/

Vì vậy, những gì đang xảy ra ở đây?

EDIT: Tôi đã gửi một báo cáo lỗi cho Microsoft:https://connect.microsoft.com/IE/feedback/details/868842/ie-11-setting-css-opacity-on-a-table-row-doesnt-affect-the-background-color-of-that-row

EDIT 2: Lỗi này đã được xác nhận bởi Microsoft

EDIT 3: Microsoft đã chuyển lỗi này cho một người mới vị trí: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/

Answer 1

Điều đó có vẻ là một lỗi IE khác .. Như một công việc xung quanh, bạn có thể thay thế thêm opacity qua thuộc tính nền với màu rgba(). Sau đó, chỉ cần thêm độ mờ cho phần tử td.

Updated Example - kết quả dường như nhất quán trên các trình duyệt.

.faded { 
    background-color: rgba(255, 0, 0, 0.4); 
    height: 100px; 
} 
td { 
    opacity:0.4 
} 

Answer 2

thêm dòng này vào đầu của html của bạn, và độ mờ đục sẽ làm việc tốt

<meta http-equiv="X-UA-Compatible" content="IE=edge" />