jQuery slideDown / slideUp 在IE7中无法正常工作

Question

我使用了一个非常基本的jQuery .slideDown，它在Firefox、Safari和Chrome中运行得很好。但是在IE7中完全无法工作。以下是脚本：

---

//Top Mailing List Drop down animation
$(document).ready(function() {
$('div#top_mailing_hidden').hide();

// Expand Panel
$("input#top_mailing").focus(function(){
$("div#top_mailing_hidden").slideDown("slow");
});

// Collapse Panel
$("input#top_mailing").blur(function(){
$("div#top_mailing_hidden").slideUp("slow");
});
});

---

我已经研究了几个小时，发现关于slideup/down的一个bug，当它被用在position:fixed元素的后代上时，在IE7中会导致失败。虽然这个动画是在一个position:fixed的导航栏内发生的，但我尝试使用position:relative包装内部元素，但仍无法在IE中显示。另外，请注意，nav元素是使用jQuery隐藏的，该函数即使在IE7中也有效，但slideup/down却没有。

以下是相关的CSS：

/* --------------Top Dropdown Mailing List------------------- */

#top_nav div#top_mailing{
    float: right;
    width: 351px;
    padding: 0 10px 10px 5px;
    background: url(images/top_mailing_bg.png) bottom center no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    text-shadow:0 -1px 0px #222;
}
#top_mailing #top_mailing_hidden{
    font-size: .7em;
    text-align: center;
    position: relative;
    height: 30px;
    zoom: 1;
}
#top_mailing #top_mailing_hidden div{
}
#top_mailing #top_mailing_hidden a{
    color: #acffc0;
    font-weight: bold;
}
#top_mailing #top_mailing_visible{
    height: 30px;
    font-weight: bold;
    font-size: .9em;
    padding-top: 5px;
}

- Brian

---

它是否会抛出任何错误？例如在Firebug中。 - o.k.w

不是的，我刚刚把整个样式表都删掉了，在火狐浏览器中仍然可以正常工作，但在IE中却不能，所以这甚至与CSS无关，我原本以为这是一个IE不喜欢的CSS定位问题。 - Brian

Answer 1

在IE7中，jQuery的slideUp()、slideDown()和slideToggle()无法与position:relative元素一起使用。

通过添加以下代码可以解决某些滑动问题：

zoom: 1;

对于滑动容器和/或元素。

我们不得不回归使用<table>用于布局来解决一些滑动问题。

- Bob Fanger

---

哈哈，谢谢你救了我一命，因为我刚刚遇到了使用.animate()时的问题。我给你点赞。 - BobG

我喜欢Stack Overflow，因为我可以在20秒内找到答案并继续我的工作。 - Christopher Altman

不错，@Bob-Fanger - 这解决了我遇到的问题 :) 点赞 - 干杯 - Terry_Brown

Answer 2

在我的例子中，这种情况发生的原因是IE不认识我用来触发.slideUp/Down的.focus。 我找到了一个很好的答案，解释了这个问题here, 但是它只允许你在focus时添加CSS类，而我需要在.focus上使用slideUp/Down动画来处理另一个元素，所以CSS类对我的情况没有帮助，有没有人有其他想法？

---

明白了！我必须使用mouseenter而不是focus，但这里是包含条件mouseenter事件的完成脚本，适用于恶魔（即IE）：

//Top Mailing List Drop down animation
$(document).ready(function() {

    if (jQuery.browser.msie === true) {
        jQuery('#top_mailing')
                .bind("mouseenter",function(){
                    $("#top_mailing_hidden").slideDown('slow');
                }).bind("mouseleave",function(){
                    $("#top_mailing_hidden").slideUp('slow');
                });
    }

$('#top_mailing_hidden').hide();

// Expand Panel
$("input#top_mailing").focus(function(){
$("#top_mailing_hidden").slideDown("slow");
});

// Collapse Panel
$("input#top_mailing").blur(function(){
$("#top_mailing_hidden").slideUp("slow");
});

});

- Brian