Почему у графики после альфа-анимации появляются ужасные черные границы в IE?

Question

Сайт, над которым я работаю , открывается необычной анимацией непрозрачности jQuery. В настоящее время он работает во всех браузерах, но в IE весь текст и альфа-изображения остаются с ужасными черными полями, что делает текст практически нечитаемым.

Есть ли какая-нибудь умная команда javascript, которую я могу запустить, чтобы обновить / обновить графику? Есть ли другой способ исправить это?

Моя проблема полностью связана с CSS и JavaScript, поэтому весь исходный код можно найти по ссылке.

Спасибо за любую помощь!

http://xistence.org/dev/

Answer 1

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

$('.item').css('filter','');

Answer 2

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

    .container img {
         background-color: white;
    }

1. Определите свойство background-image css вашего изображения для его src атрибут:

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Преимущество: вам не нужно менять разметку

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

Answer 3

Этот фрагмент кода jQuery хорошо мне помог при работе с проблемами непрозрачности в IE.

    $(function() {
        if (jQuery.browser.msie)
            $('img[src$=.png]').each(function() {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
    })

Answer 4

Этот вопрос, вероятно, имеет ответ, который вы ищете:

JQuery цикл IE7 прозрачная проблема PNG

из ответа @ darkoz:

Способ обойти это состоит в том, чтобы поместить ваш png в контейнер, а затем исчезнуть из контейнера.Вроде как это:

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>