IE褪色導致圖像上的白點

我真的被困在這一個。網站幾乎完成。試圖用IE去掉最後幾個錯誤 - 真是一個驚喜！IE褪色導致圖像上的白點

這裏是預覽網站：http://www.preview.imageworkshop.com/portfolio/

的問題 如果您在IE中查看投資組合頁面，並使用交換回來並轉發選項之間，過了一小的過濾器，而圖像開始得到覆蓋在白點（特別是在黑暗的地方）。

注意：我已經實施ISOTOPE在網站投資組合的過濾/佈局。

CSS3轉換是在CSS中定義的，但我相信ISOTOPE正在退化爲使用jquery的動畫效果。

這是一個攝影網站，所以擁有漂亮的圖像很重要。

事情我已經知道了： - 這是IE6，7和8的已知問題，引起淡入/淡出和像素獲取左爲透明。

人聲稱可以通過移動圖像的黑點解決這個問題，因爲supposidly它只是「真黑」的像素是有問題的。 我們嘗試過這種方法，但它對我們來說不起作用 - 而且我們也不希望進行這些更改，因爲顏色準確性對於圖像很重要，並且移動黑點開始與圖像混淆。在投資組合中，底部的三個大圖像的黑點發生了變化，並且仍然有白點。
顯然，將父div盒的背景顏色設置爲黑色也會解決問題。如果我將.photos的背景設置爲黑色（但是這也會使屏幕的一半變成黑色），但是對於包含圖片（.photo）的DIV的背景設置不起作用，這似乎適用於我。這樣我們就可以得到這個工作，這將是一個合適的解決方案，我不能讓它爲我工作（？）。

那麼，從這裏？ 我可以關閉通過設置animationEngine：'CSS'來實現ISOTOPE中的過渡/淡入淡出等操作。這意味着如果瀏覽器支持CSS3，那麼CSS將用於轉換，但如果不支持，瀏覽器將不會恢復爲使用javascript來進行轉換。但是，這意味着在IE上的頁面上沒有轉換，看起來如此褲子。

理想情況下，我需要解決白點問題。 - 關於如何獲得ISOTOPE刷新圖像後的圖像的任何建議？ - 也許有另外一種方法可以做轉換嗎？ - 是否可以刪除fadein/fadeout，但仍然使用某種類型的轉換，以便我仍然在IE中發生一些動畫？

任何幫助將不勝感激。我整個週末一直在甩掉我的頭髮，試圖讓它工作，但沒有成功。

更新：2011年8月9日 我設法找到一種方法來關閉淡入淡出過渡，但是，我仍然使用的JavaScript器集的不透明度爲0，以隱藏圖像，這是實際上導致了白點問題。所以我真的需要找到一種方法將背景顏色設置爲黑色，以便隱藏透明像素。

來源

2011-09-04 Gearu

IE6/7/8根本不會做opactity。它使用'filter' CSS屬性將責任委託給隨Windows提供的AxtiveX控件。這是非常舊的軟件;它是緩慢的，越野車，並且正如你所看到的那樣，它會產生糟糕的結果。但是，在IE6/7/8中沒有其他方法可以實現衰減效果。總之，IE從來沒有寫過這樣的效果。事實上，可能產生的影響已經成爲鞋子發展的趨勢。我沒有解決方案，因爲我認爲沒有解決方案。我希望別人可以證明，但我有我的疑惑。 – Spudley

我同意可能沒有一個好的解決方案，但是，我會很高興，如果我可以實現以下兩件事之一： 1）獲取DIV背景顏色顯示通過（以便這隱藏白色斑點 2）刪除只是IE的轉換的「淡入淡出」方面。如果圖像通過移動和調整大小進行過渡，然後僅消失（無褪色），我仍然很高興。 – Gearu

好的，所以我設法解決了這個問題。下面是關於泛型修復（它爲什麼會起作用的原因）的詳細信息，然後是我如何應用此修補程序的細節 - 這是我使用的jQuery ISOTOPE插件所特有的。

注意，從原來的職位預覽網站不再活躍，但實際運行的網站，現在可以看這裏：http://www.imageworkshop.com/portfolio/

通有FIX

問題是由隱藏的形象造成在IE中使用opacity：0; 。（不一定是特定於IE的衰落，因爲大多數其他線程建議我刪除了不透明度褪色，但仍有監守透明度同樣的問題：0;用於隱藏過濾圖像

的答案是使用。顯示：無;隱藏圖像進行IE

THE FIX我的具體實施

用於鍋爐板，以確定舊的/有問題的瀏覽器，通過在header.php文件使用此代碼我的。 wordpress主題 - 在識別舊瀏覽器時，會添加一個「.oldie」類：

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

CSS使用顯示：無;，而不是opactiy：0同位素（注意，這是針對我使用隱藏/過濾圖像同位素插件。

.oldie .isotope-hidden { display: none; }

了同位素的JavaScript，在頂部確定是否過時的歌曲存在：

isOldie = $('html').hasClass('oldie');

然後告訴同位素使用哪個sytle：

hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle, 
visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle

這裏是一個樣本網站，顯示該在操作中：http://support.metafizzy.co/2011/09-12-ie-trans.html

以及來自t的ISOTOPE的javascript聲明帽子頁面（注意，這是比我已經在我的網站上使用簡單）

<script> 
$(function(){ 
    var $container = $('#container'), 
    $photos = $container.find('.photo'), 
    isOldie = $('html').hasClass('oldie'); 

    $container.imagesLoaded(function(){ 
     $container.isotope({ 
     itemSelector : '.photo', 
     masonry: { 
     columnWidth: 200 
     }, 
     hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle, 
     visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle 
    }); 
}); 
    $('#filters a').click(function(){ 
     $container.isotope({ filter: $(this).attr('data-filter') }); 
     return false; 
    }); 
}); 
</script>

來源

2011-09-21 04:11:39 Gearu

在我參與的其中一個項目中，這些傢伙根本就不使用IE瀏覽器的動畫，所以這可能是一種遠離理想世界的方式，但卻接近真實。

來源

2011-09-10 21:42:16 Guard

unfortunatley這似乎是許多人採取的方法，遠非理想 - 但有時是必要的。就我而言，關閉animatnio實際上並沒有解決這個問題。該問題是由使用不透明度的過濾引起的：0隱藏圖像。我認爲我們通過改變這個使用display：none來取得一些進展。仍然確認解決方案:) – Gearu

我和原始海報有完全相同的問題。爲了擺脫白色像素/點，我將包含我的圖像的div的背景顏色設置爲＃000，這解決了問題。

希望這可以幫助所有那些沮喪的開發人員想要徹底銷燬IE，就像我一樣。

來源

2011-09-11 07:51:13 James

你是對的，這是修復的最佳選擇。在我的情況下，jquery動畫展平了包含img的DIV，所以背景顏色被忽略 - 非常令人沮喪。修復工程，如果我把整個畫廊的背景設置爲黑色 - 但這個混亂了網站的設計有純白色的背景:) – Gearu

我曾經在CMYK模式保存圖像（僅適用於JPG文件）解決了這個問題。

來源

2012-02-15 09:58:31 Jeroen

請不要猜測 – johannes

這幫了我... – Pavitar

IE褪色導致圖像上的白點

回答

相關問題