IE7 и "неровности" вокруг многослойных PNG (с jQuery) - PullRequest
Новая
       304

IE7 и "неровности" вокруг многослойных PNG (с jQuery)

3 голосов
/ 24 июня 2011

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

Дело в том, что это появляется только тогда, когда я исчезаю PNG ( и в этом случае исчезает)в другом - эффект эффектного ролловера ), потому что изначально он выглядит нормально.

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

Экран
До и после соответственно

enter image description here

jQuery

$(document).ready(function(){
    $('.mf_fader').hover(function(event){
        $('> *:first-child', $(this)).stop().fadeTo(450, 0);
        $('> *:last-child', $(this)).stop().fadeTo(350, 1);
    }, function(event){
        $('> *:first-child', $(this)).stop().fadeTo(350, 1);
        $('> *:last-child', $(this)).stop().fadeTo(450, 0);
    });
});

CSS 

#dbc_main-letsgo,
#dbc_main-letsgo > div{
    width: 460px;
    height: 150px;
}

#dbc_main-letsgo > div{ background-image: url(../img/btn_main-letsgo-default.png); }
#dbc_main-letsgo > div + div{ background-image: url(../img/btn_main-letsgo-hover.png); }

.mf_fader{
    position: relative;
    display: inline-block;
}

.mf_fader > *{
    position: absolute;
}

.mf_fader > * + *{
    display: none;
}

HTML 

<a href="#" id="dbc_main-letsgo" class="mf_fader">
    <div></div><div></div>
</a>

Я предполагаю, что это что-тоделать с плохой поддержкой PNG в IE, так что, возможно, я застрял.

Ответы [ 3 ]

2 голосов
/ 24 июня 2011

Каждый раз, когда я использую непрозрачность / затухание и т. Д. На прозрачных PNG в IE, я получаю одно и то же.

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

Насколько я знаю, это проблема IE.Если вы найдете способ анимировать непрозрачность для Trans png в IE без черной рамки ... пожалуйста, напишите.

Мне приходилось пару раз переходить от эффекта исчезновения к эффекту показа / скрытия

1 голос
/ 24 июня 2011

Да, это связано с плохой поддержкой PNG в IE.

Одна вещь, которую вы можете легко исправить, это то, что если фон за прозрачным png имеет сплошной цвет, вы можете задать элемент divс атрибутом background-color изображения png.

1 голос
/ 24 июня 2011

К сожалению, это связано с неудачной попыткой IE 7 поддерживать PNG. С эпическим провалом 6, MS обещала поддержку в 7, и это несколько провалилось.

Здесь вы можете использовать GIF или 8-битный PNG и получить лучшие результаты.

Что я делаю, так это проверяю браузер IE 7, и если я обнаруживаю 7, я переключаюсь на скрытое шоу, а не на затухание.

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

...