Как решить/взломать исчезающую полупрозрачную ошибку PNG в IE8?

Почему бы вам не попробовать с PNG8. PNG8 широко известен как полностью прозрачный формат файла GIF. Однако при экспорте с помощью Fireworks он может быть полупрозрачным, как PNG24 . Преимущество заключается в том, что IE6 отображает PNG8 с полупрозрачными пикселями, как в формате GIF, или с полной прозрачностью, но IE7 и 8 отображают его правильно как PNG24, и если вы исчезнете с помощью jQuery или любой другой библиотеки js, он не будет отображать фон с серым, потому что он не использует известное свойство -filter.

Преимущество заключается в том, что IE6 отображает PNG8 с полупрозрачными пикселями, как в формате GIF, или с полной прозрачностью, но IE7 и 8 отображают его правильно как PNG24, и если вы уменьшите его с помощью jQuery или в любой другой js-библиотеке фон не будет серым, потому что он не использует известное свойство -filter.

В IE есть только один способ выполнить преобразование прозрачности. фильтр: альфа (непрозрачность :). Как еще jQuery может это сделать?

Я использую модифицированное исправление PNG для IE6, оно отлично работает:

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                    var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                            imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                            src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                    if (isImg) this.src = emptyimg;
                    else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
    }
});
})(jQuery);

не забудьте загрузить x.gif. (прозрачный gif 1x1)

Мне удалось исправить эту проблему для IE 6/7/8.

Примерно выглядит так:

<div class="wrapper">
  <div class="image"></div>
</div>

...

/* I had to explicitly specify the width/height by pixel */
.wrapper
{
  width:100px;
  height:100px;
}

.image
{
  width:100%;
  height:100%;
  background:transparent url('image.png') no-repeat;

  /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

$(".wrapper").fadeOut('slow');

Обратите внимание, что атрибут «filter» неявно нацелен только на IE.

Это можно сделать аналогично тому, что сделал здесь Стю: http://www.cssplay.co.uk/menus/flyout_horizontal.html

У меня такая же раздражающая проблема с IE8 и IE7.. Кто-нибудь проверял, делают ли решения Cmc трюк?

Мой URL-адрес http://www.onlinebrand.dk (Верхнее меню исчезает, как Google :) Но IE это не волнует.)

EDIT: Просто проверил его сам, и даже если я заставлю ширину и высоту, ну повторяющийся img. Это не работает

Я просто нашел другой обходной лад, где Fadein обертка вместо div с изображением .png bg. И это вроде как сработало, теперь я получаю сом своего рода прозрачность в IE, но также, некоторую прокладку / маржу. Совершенно странно..

Билл Гейтс, что с этим делать? Почему мы не можем ладить?