Css yếu tố lớp phủ không vô hình

Question

Xem: http://schhh.dk/frivilligraadet/

Hộp với video ở phía dưới là, trong IE8, hiển thị như:

Tôi thực sự cố gắng để thực hiện một jsfiddle, nhưng ở đây không có vấn đề: http://jsfiddle.net/q5T8Y/7/

.view-youtube-videoer .views-field-field-video .ytb-play { 
    position: absolute; 
    display: block; 
    width: 230px; 
    height: 128px; 
    background: transparent url('http://schhh.dk/frivilligraadet/sites/all/themes/frivilligraadet/images/play.png') no-repeat 50% 50%; 
    opacity: 0.7; 
    filter:alpha(opacity=70); 
} 

Answer 1

Đó là bởi vì bạn cần phải thiết lập "width" và "display: block" cho span.ytb-video Trong chiều rộng trường hợp của bạn nên 230px

http://screencast.com/t/U2QPWvszGN

Answer 2

Đây là vấn đề với tính minh bạch của IE mà tôi sợ. Các cấu hình và gợi ý trong liên kết này có thể giúp bạn ra ngoài: http://www.jacklmoore.com/notes/ie-transparency-problems

Answer 3

Xem xét nó trong các công cụ dành cho nhà phát triển, vì lý do nào đó quy tắc lọc và quy tắc chiều rộng được kết hợp thành một. Mặc dù chúng được phân tách bằng dấu chấm phẩy (xem ảnh chụp màn hình), có thể kết hợp là "bị hỏng". và đây là lý do tại sao phần tử không có chiều rộng.

Từ CSS Tôi không thể nói ngay tại sao IE8 sẽ giải thích chúng theo cách này - chúng thậm chí không liên tiếp trong tệp! Có lẽ chỉ cần thử sắp xếp lại để xem liệu điều đó có tạo nên sự khác biệt hay không. Hoặc thay đổi nó thành

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 

là phiên bản tốt hơn cho IE8.