Как исправить проблему непрозрачности IE ClearType + jQuery в этом скрипте?

У меня довольно распространенная проблема (или так кажется, после некоторого поиска в Интернете...) с IE, искажающим как полужирный текст, так и прозрачные png, анимируя непрозрачность с помощью jQuery.

Вы можете просмотреть образец здесь: http://dev.gentlecode.net/dotme/index-sample.html (очевидно, встречается только в IE)

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

Сценарий выглядит следующим образом:

$('ul.nav').each(function() {
    var $links = $(this).find('a'),
        panelIds = $links.map(function() { return this.hash; }).get().join(","),
        $panels = $(panelIds),
        $panelWrapper = $panels.filter(':first').parent(),
        delay = 500;

    $panels.hide();

    $links.click(function() {
        var $link = $(this),
            link = (this);

        if ($link.is('.current')) {
            return;
        }

        $links.removeClass('current');
        $link.addClass('current');

        $panels.animate({ opacity : 0 }, delay);
        $panelWrapper.animate({
            height: 0
        }, delay, function() {
            var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

            $panelWrapper.animate({
                height: height
            }, delay);
        }); 

        return false;
    });

    var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';

    $links.filter(showtab).click();

});

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

Заранее спасибо за помощь!


jquery opacity internet-explorer jquery-animate
person Justine    schedule 20.04.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вставить можно так:

Измените эту строку/инструкцию:

var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

К этому:

var filtered = $panels.hide().filter(link.hash).show().css('opacity', 1);
if ($.browser.msie)
  filtered.each(function() { this.style.removeAttribute('filter'); });
var height = filtered.outerHeight();

Обычно я не одобряю использование $.browser, но в данном случае это ошибка IE, и jQuery применяет фильтр, потому что это тоже IE. Это прокрутит элементы и удалит отфильтрованный набор и снимет атрибут стиля filter, если вы находитесь в IE.

person Nick Craver    schedule 21.04.2010
comment
К сожалению, это не помогло. Жирный текст и прозрачные изображения по-прежнему отображаются очень плохо (dl.getdropbox.com/u/ 3871932/iebold.png) - возможно ли, что это какая-то другая ошибка, а не проблема с ClearType? - person Justine; 21.04.2010
comment
@Жюстин - Прости! Должно быть, я действительно устал отвечать на это :) Вам нужно установить непрозрачность, затем удалить атрибут фильтра, я обновил ответ, показывающий это, попробуйте обновленный код выше. - person Nick Craver; 21.04.2010

arrow_upward
0
arrow_downward

Я запустил образец страницы в (Vista) IE8, совместимость с IE8, Google Chrome 4.1 и Firefox 3.5.9 — если хотите, я также могу сделать XP и Win 7 — но пока все они работают одинаково.

Проблема может быть с IE6 (я думаю), потому что в IE6 есть известные проблемы с IE6 и прозрачными png, google с:

ie6 прозрачный png исправить

за кучу исправлений в т.ч. (который второй в вышеприведенном поиске в гугле и первый в поиске говорит, что это лучшее решение, чем его):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Что касается образца jquery, который вы опубликовали, если он по-прежнему не работает с обходными путями IE6/png, опубликуйте html, который вы используете с jquery, чтобы его можно было отладить.

person amelvin    schedule 20.04.2010
comment
Спасибо, но это не то, что я ищу. Существует известная проблема с анимацией непрозрачности во всех версиях IE, из-за которой полужирный текст становится почти нечитаемым. - person Justine; 21.04.2010
comment
В шрифте в примере буквы «s», «a» и «v» в IE имеют несколько жирных зазубрин — эти буквы отображаются хуже, чем в других браузерах. - person amelvin; 21.04.2010

arrow_upward
0
arrow_downward

Вы можете исправить проблему во время анимации, а не только после нее, применив стиль background-color:#fff к контейнеру в вашем css (или к элементу, если это контейнер).

Я получил этот совет от The Strange Zen of Javascript IE жирным шрифтом + проблема с непрозрачностью.

Это прекрасно исправило мою проблему с IE7. Кроме того, даже не используя цвет фона, вы можете исправить проблему после анимации, не возясь с фильтром, просто удалив свойство opacity css, когда элемент полностью виден, аля element.css({opacity: ''});.

person ErikE    schedule 14.07.2011