Hình nền không hiển thị IE8

Question

Vì một số lý do, hình nền không hiển thị trong IE8 và IE9. Nó xuất hiện trong IE10, Chrome và Firefox.

Đây là CSS liên quan:

.addCartButton 
{ 
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09); 
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09); 
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09); 
    background: url('/images/cartWhite.png') 18px 11px no-repeat, linear-gradient(top,#74c163,#1d7a09); 
} 

Answer 1

CSS3 multiple background không được hỗ trợ bởi trình duyệt IE 8 và thấp hơn. Vì vậy, giá trị nền được phân cách bằng dấu phẩy không hợp lệ do đó sẽ không hoạt động.

Và nó không hoạt động trên IE9, ngay cả khi nó hỗ trợ nhiều nền (buggy nhưng nó) vì IE9 KHÔNG hỗ trợ CSS3 Gradient vì vậy một lần nữa nó làm cho toàn bộ khai báo không hợp lệ.

tôi đề nghị bạn sử dụng !important trên tờ khai nền nhiều nhưng làm cho một tuyên bố nền duy nhất là cuối cùng trong dòng, vì vậy IE9 và dưới đây có thể hiển thị ít nhất một trong những của BG:

background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09) !important; 
background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09) !important; 
background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09) !important; 
background: url('/images/cartWhite.png') 18px 11px no-repeat, linear- gradient(top,#74c163,#1d7a09) !important; 
background: url('/images/cartWhite.png') 18px 11px no-repeat; /* for IE9 and below */ 

---

Như một tùy chọn khác, bạn có thể sử dụng CSS3Pie. Ví dụ:

#myElement { 
    behavior: url(http://path/to/pie/PIE.htc); 
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/ 
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/ 
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/ 
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/ 
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/ 
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/ 
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/ 
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/ 
} 

Hãy nhớ rằng nó sẽ chỉ hoạt động nếu url của behavior nằm trên cùng một tên miền. Read more.