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

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

36 голосов
/ 30 июля 2009

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

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

Обновление

Посмотрим на мои испытания

альтернативный текст http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

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

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

Спасибо

Ответы [ 14 ]

21 голосов
/ 08 ноября 2010

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

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

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

Я копирую код ниже. Он не зависит от фреймворка (это чистый JavaScript), но вы должны поместить его в событие готовности вашего DOM фреймворка (или использовать domready.js, как я). 

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 + "')";
        }
    }
}

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

7 голосов
/ 13 июня 2011

HTML 

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

в CSS 

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

легко, быстро и красиво :) 1007 *

6 голосов
/ 09 февраля 2011

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

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

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

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

<!-- 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) и затем используя процедуры Microsoft DXImageTransform для загрузки PNG в качестве фильтра для пустого изображения. Существуют и другие исправления PNG, которые работают, заключая вещи в элементы div или span, но они часто нарушают ваш макет, поэтому я их избегаю.

Надеюсь, это поможет.

5 голосов
/ 17 мая 2010

Мне удалось исправить эту проблему в 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.

4 голосов
/ 06 февраля 2011

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

enter image description here

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

#img2
{
    background:#fff;   
}

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

enter image description here

4 голосов
/ 10 ноября 2010

Я использовал эту функцию для предварительной загрузки изображений в галерею карусели. Это основано на ответе Алехандро Гарсии Иглесиаса выше. Он избавился от «черного ореола» в 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');
2 голосов
/ 17 мая 2010

Я использую модифицированное исправление 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)

2 голосов
/ 30 июля 2009

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

1 голос
/ 17 сентября 2012

До сих пор у меня ничего не получалось, так как я читал, сочетая настройки прозрачности в CSS и прозрачные PNG Это решение в конечном итоге сработало для меня на анимированной странице непрозрачности в 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.

1 голос
/ 09 декабря 2009

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...