Question

我有一个相当普遍的问题（或者看起来，经过一些谷歌搜索...），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();

});

如果有人可以通过它并告诉我如何修复不透明度问题，我将不胜感激。过滤方法是否也能解决我遇到的麻烦问题，透明的pngs像粗体一样有像素化的丑陋边框？

提前感谢您的帮助！

Answer 1

你可以像这样把它放进去：

更改此行/声明：

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。这将遍历元素并删除过滤后的集合，如果您在IE中，则取消filter样式属性。

Answer 2

我在（Vista）IE8，IE8兼容性，谷歌Chrome 4.1和Firefox 3.5.9上运行了示例页面 - 如果你愿意，我也可以做XP和Win 7 - 但到目前为止它们似乎都在类似的时尚。

问题可能出在IE6上（我猜）因为IE6中有IE6和透明png的已知问题，谷歌用：

ie6透明png修复

对于一系列修复，包括（这是上述搜索中的第二个，搜索中的第一个说它是比他更好的解决方案）：

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

至于您发布的jquery示例，如果它仍然以IE6 / png变通方法失败，那么将您使用的html发布到jquery，以便可以对其进行调试。

Answer 3

您可以在动画期间解决问题，而不仅仅是之后，将background-color:#fff样式应用于css中的容器（如果是容器，则应用于元素）。

我从The Strange Zen of Javascript – IE bold text + opacity problem得到了这个提示。

这很好地解决了我的IE7问题。此外，即使不使用背景颜色，您也可以在动画完成后修复问题而不会弄乱过滤器，只需在项目完全可见时删除不透明度css属性，ala element.css({opacity: ''});。

如何在此脚本中修复IE ClearType + jQuery不透明度问题？

3 个答案: