2011-08-31 37 views
8

Tôi đang sử dụng bit sau của CSS để tạo ra một gradient nền tuyến tính. Dường như nó hoạt động tốt trong IE8/9, FF, Safari và chrome nhưng không hoạt động trong IE7. IE7 cho thấy một nền (màu xanh) vững chắc. Đây là mã của tôigradient nền trong IE7 với CSS

.menu_body a { 
    display:block; 
    color:#006699; 
    background: #008800; 
    /* Mozilla: */ 
    background: -moz-linear-gradient(top, #0b71a4, #025f8e); 
    /* Chrome, Safari:*/ 
    background: -webkit-gradient(linear, 
      left top, left bottom, from(#0b71a4), to(#025f8e)); 
    /* MSIE */ 
    filter: progid:DXImageTransform.Microsoft.Gradient(
      StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0); 
    padding: 1px 18px; 
} 

Trả lời

18

Trong IE < = 7, bộ lọc sẽ không hoạt động trừ khi phần tử có layout.

zoom: 1; 

Hãy lưu ý rằng nó có thể phá vỡ những thứ khác, vì vậy cũ tốt background-image có thể là giải pháp an toàn và đáng tin cậy.

Cũng xin lưu ý rằng CSS của bạn thiếu thuộc tính gradient cho Opera, IE10 và cú pháp được cập nhật cho Webkit.

+1

Cảm ơn điều này đã làm việc tuyệt vời! (không thể bỏ phiếu cho dù tôi là thành viên mới, xin lỗi vì điều đó) EDIT: cho cú pháp cập nhật cho Webkit tôi có thể sử dụng -webkit-linear-gradient() phải không? – Kiwi1

+0

@Schimmel Chính xác; cú pháp cũng giống như đối với Firefox và IE10, ngoại trừ tiền tố của nhà cung cấp khác nhau. Nhân tiện, bạn sẽ có thể chấp nhận câu trả lời của tôi bằng cách nhấp vào hộp kiểm ở bên trái của nó. – duri

+0

@duri - IE10? là cái gì mới? :) – Dementic

0

tôi không chắc chắn nếu các thông số của biến đổi này là trường hợp nhạy cảm - nhưng nhìn thấy như hầu hết các khác CSS là, bạn có thể thử:

startColorstr='#0b71a4', endColorstr='#025f8e' 

Thông báo the-chữ thường bắt đầu ký tự và hậu tố str chữ thường.

+0

Tôi đã thử giải pháp của bạn nhưng tiếc là nó không hoạt động. Cũng cố gắng để cung cấp cho tất cả các trường hợp thấp hơn vỏ nhưng điều đó cũng không có vẻ để làm việc ra ngoài. – Kiwi1

+0

Hãy thử với 'progid: DXImageTransform.Microsoft.gradient', quá - lưu ý trường hợp chữ thường' gradient'. –

+0

Cảm ơn bạn đã trả lời nhanh chóng, nhưng tiếc là điều này cũng không hoạt động. Tôi thực sự bối rối vì theo tài liệu sau, phép biến đổi này sẽ hoạt động cho Internet Explorer 5.5 trở lên. Xem: http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx – Kiwi1

2

Cú pháp đúng là:

filter: progid:DXImageTransform.Microsoft.gradient 
(startColorstr=#550000FF, endColorstr=#55FFFF00) 

này được hỗ trợ bởi IE4>

Xem nguồn MSDN here.