IE9 jQuery下拉效果问题

Question

我有一个ul列表，在它上面点击一个div，然后切换它，以便我可以滑动列表...但是当我在IE9上滑动列表时，我看到下面的奇怪效果：

这会在slideUp时发生。

我的代码如下：

    $(".btn").click(function() {
    if ($(this).next().is(":visible")){
        $(".slide_menu").slideUp("fast");
    }else{
        $(".slide_menu").slideUp("fast");
    }
});

HTML长这样：

        <div class="btn">Button</a></div>
    <ul class="slide_menu">
    <li><a href="http://domain.com">Link</a></li>
    </ul>

- stergosz

---

你介意也把HTML一起发布吗？ :) - Stefan Konno

没问题，看主贴。 - stergosz

@fxuser：你能把你的CSS也发一下吗？你用了box shadow吗？ - DarthJDG

是的，盒子阴影可能会搞砸它，我的意思是我们正在谈论IE ^^ - Stefan Konno

你正在使用哪个版本的jQuery？v1.5.1是第一个支持IE9的版本。此外，IE9以哪种文档兼容模式呈现您的网站？错误的模式可能会导致不必要的问题。 - andyb

我只在btn类上使用text-shadow:0 2px 4px #828260;，我正在使用v1.6的jquery版本，IE9默认渲染为IE9标准文档模式。 - stergosz

Answer 1

如果你只是想在点击时切换它，试试这个。稍微修改了你的代码，因为我没有IE9，因为我用的是Mac，但这应该可以工作。如果还是不行，请告诉我，我会看看能做什么！

http://jsfiddle.net/fWJuk/1/

- Stefan Konno

---

那么你的问题可能是CSS，我想是因为阴影效果。如果JavaScript表现正常，那么尝试去掉阴影效果，看看是否仍然存在同样的问题。IE浏览器可能在动画和阴影效果渲染方面存在一些问题。 - Stefan Konno

我不使用盒子阴影，而是使用文本阴影。我已经从CSS中删除了它，包括(btn, slide_menu)的所有CSS，但仍然显示这些奇怪的线条... - stergosz

这是一个父级div引起的问题，并且它有一些盒子阴影..现在我必须找到解决方法，因为它会破坏设计..谢谢大家。 - stergosz

Answer 2

如果你的CSS样式中将height设置为100%在html或body元素上，那么删除它可能可以解决IE9阴影渲染问题。这对我有用。我知道，IE9本应一开始就做得很好。这看起来像是一个IE9的bug。

- jhsu