IE GIF/PNG透明度問題與jQuery

這裏是有問題的網頁：http://s289116086.onlinehome.us/lawjournaltv/index.php

主要藍色標註的背景原本是PNG，但是當我申請了一些jQuery欺騙它（點擊右上角的數字查看我的意思），一個醜陋的白色邊框出現在透明度應該在的地方。從IE8看這個截圖：http://skitch.com/darkdriving/n62bu/windows-xp-professional

我想我可以犧牲PNG的質量/靈活性，並且將每個背景都重新設置爲GIF，並將無光澤顏色設置爲白色（現在）。那麼，我被證明是錯誤的，因爲IE正在處理與原始PNG相同的GIF透明度。

我在這裏讀到PNG，Javascript和IE與多個過濾器有關的問題不能應用於一個圖像，但不應該免除GIF，因爲它們缺少Alpha通道？有沒有什麼辦法讓IE在Firefox或Webkit瀏覽器中看起來類似？

在此先感謝！

來源

2010-04-14 Andrew

我基本上是通過加載不同的一組每個頁面刷新的圖像（使用PHP）的解決了這個。這不是動態的，但我嘗試使用醜陋的專有CSS過濾器或其他基於JavaScript的插件都毫無結果。在我看來，這顯然是我在黑客入侵IE的時候遇到的最大的錯誤之一。事實上，我很驚訝，我花了很長時間才遇到它。

在這種情況下對智者說的話：嘗試在純色上背對透明圖像或在IE中遭受後果。

來源

2010-06-02 04:22:00 Andrew

這是IE中的一個錯誤。

沒有當前版本的IE支持opacity CSS proeprty，因此jQuery使用Alpha濾鏡代替。但是，過濾器會強制元素完全不透明，因此它們無法正確使用透明PNG。

要在半透明元素中使用透明PNG，需要使用AlphaImageLoader過濾器（即使在IE8中）應用PNG。例如：

if ($.browser.msie) 
    $(something).css({ 
     background: 'none', 
     filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)' 
    });

（此代碼的工作，我使用它現在）

來源

2010-04-14 00:21:28 SLaks

所以，在我的例子中，5個標註中的每一個標識都由唯一的ID（＃slider01，＃slider02等）以及普通的類「.slider」來標識。使用ID應用背景（有問題的透明PNG），那麼我在填充解決方案的「某些東西」部分？這些圖像可以保持爲背景或者它們必須是頁面上的圖像嗎？ – Andrew 2010-04-14 00:28:32

除IE之外，它們可以保持爲背景。 'something'會是''someId'' – SLaks 2010-04-14 00:29:37

IE GIF/PNG透明度問題與jQuery

回答

相關問題