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

【问题标题】：How to fix IE ClearType + jQuery opacity problem in this script?如何修复此脚本中的 IE ClearType + jQuery 不透明度问题？
【发布时间】：2011-02-10 08:22:05
【问题描述】：

我遇到了一个相当普遍的问题（或者似乎是这样，经过一些谷歌搜索之后......），IE 在使用 jQuery 为不透明度设置动画时会弄乱粗体文本和透明 png。

您可以在此处查看示例：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 internet-explorer jquery-animate opacity

【解决方案1】：

我已经在 (Vista) IE8、IE8 兼容性、Google 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 一起调试。

【讨论】：

谢谢，但这不是我要找的。在所有版本的 IE 中，动画不透明度存在一个已知问题，使粗体文本几乎无法阅读。
在示例中的字体中，'s'、'a' 和 'v' 在 IE 中确实有一些粗体锯齿 - 这些字母的渲染效果比其他浏览器更差。

【解决方案2】：

你可以这样写：

更改此行/语句：

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 样式属性。

【讨论】：

不幸的是，它没有成功。粗体文本和透明图像的渲染效果仍然很差 (dl.getdropbox.com/u/3871932/iebold.png) - 是否可能是其他错误而不是 ClearType 问题？
@Justine - 对不起！我一定是真的厌倦了回答这个问题:) 你需要设置不透明度然后删除过滤器属性，我更新了显示这个的答案，试试上面更新的代码。

【解决方案3】：

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

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

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

【讨论】：