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

Как вы знаете, IE6 имеет ошибку, которая не может отображать полупрозрачный PNG-файл без использования нестандартного стиля, такого как фильтр. В IE7 эта проблема исправлена. Но у него все еще есть ошибка в PNG-файле. Он не может правильно отображать исчезающий полупрозрачный PNG-файл. Вы можете ясно видеть это, когда используете функцию show / hide в jQuery с полупрозрачным PNG-файлом. Фон изображения отображается непрозрачным черным цветом.

У вас есть идея для решения этого вопроса с помощью jQuery.

обновление

давайте посмотрим мое тестирование

alt текст http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

Как вы видите, IE8 всегда неправильно отображает изображение PNG-24. Кроме того, IE8 по-прежнему правильно отображает PNG-8 Изображение, когда я исчезаю(jQuery.функция fadeOut) это только. Но он неправильно отображает PNG-8 Изображение, когда я fade & resize(jQuery.скрыть функцию) в то же время.

PS. Вы можете загрузить мой исходный код тестирования из здесь.

спасибо,

14 ответов


Эй, я не знаю, если вы все еще ищете ответ. Пару дней назад у меня была такая же проблема с анимацией div с изображением PNG внутри. Я пробовал много решений, и единственный, который работал нормально, - это тот, который я закодировал сам.

проблема, похоже, в IE отсутствует поддержка непрозрачности и правильная поддержка PNG, поэтому он нарушает отображение PNG после применения эффекта непрозрачности (я считаю, что анимационные фреймворки полагаются на пропиетный фильтр MSIE "AlphaImageLoader" для эффекта непрозрачности на IE). Этот любопытно (для меня, что все еще не очень хорошо понимаю), что эта проблема может быть решена с помощью того же фильтра для загрузки изображения перед анимацией.

Я написал простой javascript, который применяет фильтр к каждому изображению .Расширение PNG. Мои анимации отлично работают на IE с ним.

скопировать код, приведенный ниже. I'TS framework independent (это чистый JavaScript), но вы должны поместить его в событие DOM ready вашей структуры (или использовать domready.Яш, как я делавший.)

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

пожалуйста, дайте мне знать, если работал нормально для вас, и если анимация работает гладко. С уважением!


HTML-код

   <img src="image.png" class="iefix" width="16" height="16" />

в CSS

.iefix
{
 /* IE hack */
  background:none; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

легко, быстро и приятно :)


основной причиной проблемы, по-видимому, является плохая поддержка Micrsoft IE для Альфа-прозрачности PNG (в любой версии IE). IE6 является худшим преступником, рендеринг Альфа-прозрачных пикселей в бледно-голубой цвет. IE7 и IE8 обрабатывают Альфа-прозрачность PNG, но не могут обрабатывать изменение непрозрачности Альфа-прозрачного пикселя в PNG – они отображаются как черный, а не прозрачный.

мои собственные исправления для этого зависят от ситуации. Вот некоторые подходы:

  1. просто используйте GIF. GIFs не будут отображаться как гладкие (из-за ограниченной глубины цвета), но пиксели полностью прозрачны.
  2. используйте исправление IE PNG, доступное здесь:http://git.twinhelix.com/cgit/iepngfix/ -- открыть индекс.html и читать комментарии.
  3. анимировать движение, но не анимировать непрозрачность изображений PNG.
  4. условно выполните любое или все вышеперечисленное, используя тесты JavaScript, условные комментарии или MSIE-только расширение "поведение" для CSS. Вот как все это может работать:

условные комментарии:

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

в css:

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

через обнаружение JavaScript:

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

В iepngfix.поведение htc работает путем замены PNG пустым изображением (blank.gif), а затем с помощью процедур DXImageTransform Microsoft для загрузки PNG в качестве фильтра на пустое изображение. Есть и другие исправления PNG, которые работают, оборачивая вещи дивы или пролеты, но они часто нарушают ваш макет,поэтому я избегаю их.

надеюсь, что это помогает.


мне удалось исправить эту проблему для 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; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

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

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


я использовал эту функцию для предварительной загрузки изображений в галерею карусель. Он основан на ответе Алехандро Гарсии Иглесиаса выше. Он избавился от "черного ореола" в IE 6 & 8.

function preloadImages(id) {
    var c = new Array();
    $(id+' img').each( function(j) {
        c[j] = new Image();
        c[j].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; 
        }
    });

}

вызов такой:

preloadImages('#Stage');

Я просто нашел способ решить проблему случайно, когда я пытаюсь исправить ошибку IE8 на следующем изображении.

enter image description here

самый простой способ, вы просто определяете фон текущего изображения, как показано ниже кода. Или вы можете видеть полный исходный код и демо на моем JsFiddle

#img2
{
    background:#fff;   
}

однако, если у вас есть какое-то сложное изображение, как моя ошибка, вы должны попытаться добавить почти невидимый слой под вашим изображением и установить цвет фона в какой-то цвет, который вы как.

enter image description here


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


Я использую измененное исправление 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 - ... (прозрачный 1x1 gif)


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

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


ничего не работало для меня до сих пор, что я читал, сочетая как настройки непрозрачности через CSS, так и прозрачные PNGs. Это решение закончилось работой для меня на анимированной странице непрозрачности на IE8. Другие решения, перечисленные на этой странице не работает.

#img {
    background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */
    zoom:1;
    width:600px;
    height:400px;
}

<div id='img'></div>

обратите внимание, что сначала фильтр имеет альфа-фильтр, затем AlphaImageLoader.


Это можно сделать аналогично тому, что сделал здесь Стью: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, но также и некоторое заполнение/маржу..Совершенно чокнутая..

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


  1. задать сплошной цвет фона для вашего изображения:

    .img контейнер { фон-Цвет: белый; }

  2. определение фон-изображение css свойство вашего изображения к его src:

    $('img.png-trans').каждая функция() { $(этот.)css ('background-image', $(this).буква attr('ГРЦ')); });

преимущество: вам не надо менять свой разметка

недостаток: иногда применение сплошного цвета фона не является приемлемым решением. Обычно это для меня.


использовать Unit PNG Fix для полупрозрачного png-24.