Internet Explorer 8 hiển thị độ dốc thay vì hình nền

Question

Tôi gặp lỗi lạ. Tôi đang vẽ một hình ảnh màu vàng PNG màu vàng trong suốt trong một DIV phủ lên một số văn bản. Với các trình duyệt bình thường, mọi thứ có vẻ như vậy. Có một số văn bản và một lớp phủ màu vàng, bán trong suốt phía trên nó.

Trong Internet Explorer 8 Tuy nhiên, thay vì ốp lát các 1x1 PNG hình ảnh, một gradient (!) Sẽ được hiển thị.

CSS là khá đơn giản:

.edit_section_overlay { 
    position: absolute; 
    z-index: 150; 

    top: -6px; 
    bottom: -6px; 
    left: -6px; 
    right: -6px; 

    border: 1px solid #afad9d; 
    background: url('../../images/content/edit/section/overlay/background-color.png') repeat; 

    min-height: 34px; 
    cursor: move; 
} 

Tôi chưa từng thấy một lỗi như thế này trước và Google không giúp tôi ...

Dưới đây là một bản demo trong jsFiddle, http://jsfiddle.net/jUVfS/

Answer 1

Hình ảnh .png của bạn cần phải có kích thước lớn hơn, tại tối thiểu1x2 thay vì 1x1.

Xem: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 không thực hiện lặp lại của một điểm ảnh 1x1 hình nền bán trong suốt một cách chính xác khi bất kỳ yếu tố khác trên trang được sử dụng "-ms- lọc " drective cho độ trong suốt alpha.