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

Question

我遇到了一个非常普遍的问题（或者在一些谷歌搜索后看起来是这样），就是IE在使用jQuery动画透明度时会同时弄乱粗体文本和透明png。

你可以在这里查看示例：http://dev.gentlecode.net/dotme/index-sample.html （显然只在IE中出现）

我看到一些博客文章说解决方法是删除 filter 属性，但我不确定如何将其应用于我正在使用的脚本，因为我从教程中得到了它，仍在学习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图片边框呢？

提前感谢您的所有帮助！

- Justine

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的bug，而jQuery也会应用过滤器。这将循环遍历元素并删除过滤集，并在IE中去掉filter样式属性。

- Nick Craver

---

很不幸，它并没有起到作用。加粗文本和透明图像仍然呈现非常糟糕（http://dl.getdropbox.com/u/3871932/iebold.png）- 可能是其他的 bug，而不是 ClearType 的问题吗？ - Justine

@Justine - 抱歉！我回答这个问题的时候可能真的很累 :) 你需要先设置不透明度，然后再移除过滤属性，我更新了答案并展示了这一点，请尝试上面的更新代码。 - Nick Craver

Answer 2

我已经在（Vista）IE8，IE8兼容性，Google Chrome 4.1和Firefox 3.5.9上运行了示例页面 - 如果您愿意，我也可以在XP和Win 7上运行 - 但到目前为止，它们似乎都以类似的方式工作。

问题可能出现在IE6（我猜测），因为IE6和IE6中的透明png存在已知问题，请使用以下关键字在Google中搜索：

ie6 transparent png fix

获取一堆修复方案，包括（在上述Google搜索中排名第二的）更好的解决方案：

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

关于您发布的jquery示例，如果它在IE6/png解决方法下仍然失败，请发布您正在使用的带有jquery的HTML代码，以便进行调试。

- amelvin

---

谢谢，但这不是我要找的。在所有版本的IE中，使用动画透明度存在已知问题，会使粗体文本几乎无法阅读。 - Justine

在示例中的字体中，'s'、'a'和'v'在IE中确实有一些粗体锯齿 - 这些字母的呈现效果比其他浏览器差。 - amelvin

Answer 3

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

我从Javascript奇怪的禅境- IE粗体文本+不透明度问题得到了这个提示。

这很好地解决了我的IE7问题。此外，即使不使用背景颜色，您也可以通过在项目完全可见后简单地删除opacity css属性来修复动画后的问题，如element.css({opacity:''});。

- ErikE