Transparent vấn đề PNG Animate trên Internet Explorer

Question

CSS Code:

#btn{ 
    background: url(transparent.png) no-repeat; 
    filter: alpha(opacity=0); 
    -moz-opacity: 0; 
    -khtml-opacity: 0; 
    opacity: 0; 
} 

JavaScript/jQuery:

$("#btn").animate({opacity:1,"margin-left":"-25px"}); 

tôi không có bất kỳ vấn đề với mã ở trên vào trình duyệt Firefox, Chrome và những người khác. Nhưng nó không hoạt động trên bất kỳ phiên bản nào của Internet Explorer.

Vấn đề là hình ảnh PNG được hiển thị lạ, nền của PNG trong suốt trông có màu đen. Khi tôi loại bỏ hiệu ứng mờ đục, không có vấn đề gì.

Giải pháp là gì?

Answer 1

Hiện tại không có giải pháp nào cho điều này mà tôi biết. Chỉ cần phải chờ cho IE bắt kịp với phần còn lại của thế giới. Tôi đã phải từ bỏ một tính năng như vậy trong một dự án gần đây chỉ vài ngày trước. Rất tiếc, bạn không thể có PNG có cạnh lông với IE mờ dần trong và ngoài với jQuery.

Answer 2

Lưu ý thú vị: jQueryTOOLS sử dụng GIF trong tất cả các phiên bản IE làm bugfix cho chú giải công cụ. Demo

Answer 3

Có vẻ như Sampson có thể đã sai. Xem bài Dave Shea của về vấn đề này: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

tôi chỉ cần đi để đổ ba đoạn của giải pháp ở đây:

Tất nhiên, không có phiên bản của IE hỗ trợ thuộc tính CSS opacity nào, nên jQuery thay áp dụng độ mờ đục bằng cách khai thác bộ lọc AlphaImageLoader độc quyền của IE. Điều này kết thúc là nguyên nhân gốc rễ của lỗi (seemingly well-known). Sửa lỗi được đề xuất là là áp dụng tính minh bạch cho các phần tử cha , nhưng tôi đã có ít thành công với giải pháp thay thế đó.

Thư viện nhỏ được gọi là DD_belatedPNG áp dụng Minh bạch PNG qua VML thay vì AlphaImageLoader. Nó được thiết kế cho IE6, nhưng nó hoạt động tốt trong IE7 là . Đối với IE8, tôi bị buộc phải ném ra một thẻ X-UA-Compatiblemeta và chuyển IE8 xuống chế độ IE7 cho trang cụ thể này.

Nó vẫn chưa hoàn hảo. Tôi nhận thấy một hộp giới hạn màu trắng mờ nhòe thông qua ở độ mờ thấp hơn buộc tôi để điều chỉnh một chút hiệu ứng di chuột cho tất cả các phiên bản của IE. Nhưng bạn biết đấy, cho tất cả những điều đó, nó cũng đủ tốt đủ.

---

Mmmhmmm ... Đó là kỳ quặc rằng giải pháp này không bật lên khi câu hỏi này được hỏi 6 tháng trước. Chắc chắn, bài đăng trên blog này không tồn tại, nhưng giải pháp đã diễn ra khá lâu. Thật lạ lùng khi không ai để ý đến nó ...

Answer 4

Đối với tôi, nó hoạt động để chỉ bao gồm thuộc tính bộ lọc với giá trị trống trong jQuery.hàm animate()

Có thể điều này cũng sẽ phù hợp với bạn.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

Bên cạnh đó bạn có thể phải loại bỏ các tài sản lọc từ CSS của nút bấm của bạn.

Answer 5

filter:'' Hack không làm việc với jQuery hiện tại (1.6.1) nữa

Answer 6

Tôi nghĩ rằng có một giải pháp thực tế ở đây: http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

Trong trường hợp của tôi nó đã giải quyết được bg đen awefull trên png động của tôi hình ảnh với nền trong suốt. Nó làm việc như một say mê. Thử nghiệm trên ie7 + Tôi không thể kiểm tra ie6 cho thời điểm này.

Hy vọng nó sẽ giúp mọi người :) Julien

Answer 7

Sử dụng ảnh PNG cho trình duyệt hiện đại (mozilla, Opera, Chrome vv):

background:url(../images/banner01.png) no-repeat right 13px; 

Thêm này Đối với IE (Sử dụng một CSS Hoặc sử dụng IE hack)

/* ie fix */ 
background-image:none; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png", 
sizingMethod="crop"); 

Answer 8

Có thư viện được cho là giải quyết vấn đề này: jCSML. Tôi đã thử nó và nó hoạt động để animate pngs trong IE 7+.

Answer 9

ĐÂY LÀ FIX! Cập nhật lên jQuery mới nhất. Đó là nó. Nó hoạt động sau đó.

Answer 10

Nhờ Julien cho câu trả lời của mình, nó dẫn tôi đi đúng hướng!

Tuy nhiên, tôi vẫn nhận được một vầng hào quang màu xám xung quanh văn bản trong quá trình chuyển đổi độ mờ hình ảnh. Nó trông ổn khi nó tĩnh, nhưng nó vẫn tạo ra một vầng hào quang màu xám hơi lạ (IE 8). Tôi đã sửa nó bằng cách thay đổi các giá trị bên dưới.

Ngoài ra, tôi phải khai báo riêng thuộc tính "thu phóng: 1" vì IE 8 chỉ đập giá trị đó vào cuối thuộc tính background. Cùng một điều với background-color: transparent; IE sucks.

My CSS làm việc:

.classOfParentElement img { 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */ 
} 

.classOfParentElement img { 
    -ms-zoom: 1; 
    zoom: 1; 
    background-color: transparent; 
} 

Lưu ý rằng tôi đã phải thay đổi endColorstr=#00FFFFFF để endColorstr=#FFFFFFFF.

Để nhắc lại Julien, giải pháp này đến từ Viget.com.