Question

我真的被这个问题困住了。网站差不多完成了。只是试图用IE来消除最后几个错误 - 真是一个惊喜！

以下是预览网站：http://www.preview.imageworkshop.com/portfolio/

问题如果您在IE中查看投资组合页面，并使用过滤器在选项之间交换和转发，过一会儿，图像开始被白点覆盖（特别是在黑暗区域）。

注意：我已在网站投资组合中实施了ISOTOPE过滤/布局。

CSS3过渡是在CSS中定义的，但我相信ISOTOPE会降级为使用jquery来制作动画效果。

这是一个摄影网站，所以拥有漂亮的图像很重要。

我已经知道的事情： - 这是IE6,7和8中的一个已知问题，由fadein / fadeout引起，像素变为透明。

人们声称你可以通过移动图像的黑点来解决这个问题，因为它只是“真正的黑色”像素才有问题。 我们尝试了这个，它对我们不起作用 - 我们也不想做这些更改，因为颜色准确性对于图像很重要，并且移动黑点开始弄乱图像。在投资组合中，底部的3个大图像已经移动了黑点，并且仍然得到白点。
显然，将父div框的背景颜色设置为黑色也可以解决问题。如果我将.photos的背景设置为黑色，这似乎对我有用（但是这也使得屏幕的一半变黑。但是设置包含图片（.photo）的DIV的背景也无济于事。如果有的话我们可以通过这种方式实现这一点，这将是一个合适的解决方案。我无法让它为我工作（？）。

那么从哪里来？ 我可以通过设置animationEngine：'CSS'来关闭ISOTOPE中的过渡/淡入淡出等。这个有效意味着如果浏览器支持CSS3，那么CSS将用于转换，但如果没有，浏览器将不会恢复使用javascript进行转换。但是，这意味着IE上的页面上没有转换，看起来很麻烦。

理想情况下，我需要解决白点问题。 - 有关如何在过滤器后获取ISOTOPE刷新图像的任何建议？ - 也许我可以采用另一种方式进行过渡？ - 是否可以删除fadein / fadeout，但仍然使用某种变换，以便我仍然在IE中发生一些动画？

非常感谢任何帮助。整个周末我一直在试着把头发弄掉，但没有成功。

更新：2011年8月9日 我设法找到一种关闭淡入淡出过渡的方法，但是，我正在使用的javascript过滤器仍将不透明度设置为0以隐藏图像，这实际上导致白点问题出现。所以我真的需要找到一种方法来将背景颜色设置为黑色，以便隐藏透明像素。

Answer 1

我遇到了与原始海报完全相同的问题。为了摆脱白色像素/点，我将包含我的图像的div的背景颜色设置为＃000，这解决了问题。

希望这能帮助那些想要像我一样彻底摧毁IE的那些沮丧的开发者。

Answer 2

好的，所以我设法解决了这个问题。下面是有关通用修复程序的详细信息（它工作的原因），然后根据我的具体方式应用此修复程序 - 这是我正在使用的jquery ISOTOPE插件所独有的。

请注意，原始帖子中的预览网站不再有效，但现在可以在此处查看实时网站：http://www.imageworkshop.com/portfolio/

GENERIC FIX

问题是由使用不透明度：0; 隐藏图像引起的（不一定特定于IE中的淡入淡出，正如大多数其他线程所暗示的那样。我删除了不透明度淡化，但仍然具有相同的效果问题是因为不透明度：0;用于隐藏过滤后的图像。

答案是使用 display：none; 来隐藏IE的图像。

我对固定的具体实施

使用锅炉板来识别旧的/有问题的浏览器，在我的wordpress主题的header.php文件中使用此代码 - 当识别旧浏览器时，这会添加一个类“.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使用display：none;而不是opactiy：0表示ISOTOPE（注意这是我用来隐藏/过滤图像的ISOTOPE插件特有的。

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

在ISOTOPE javascript中，顶部标识是否存在oldie：

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

然后告诉同位素使用哪种口音：

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

这是一个示例网站，其中显示了此操作：http://support.metafizzy.co/2011/09-12-ie-trans.html

以及来自该页面的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>

Answer 3

我曾经通过以CMYK模式保存图像来解决了这个问题（仅适用于JPG文件）。

Answer 4

在我参与的其中一个项目中，这些人根本不使用IE的动画，所以这可能是一种方式 - 远离理想世界，但接近真实。

IE淡入淡出导致图像上出现白点

4 个答案: