Question

所以我使用了一个非常基本的jQuery .slideDown，它在FF，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");
});
});

我已经研究了几个小时，发现了一些与滑动/缩小有关的错误，导致它在用于postion的后代时在IE7中失败：固定元素。这个动画发生在一个位置：固定的导航栏，但是，我已经尝试用位置包装内部元素：相对但无济于事，我仍然在IE中得不到任何东西。另外，请注意nav元素是用jQuery隐藏的，即使在IE7中该函数也能正常工作，但是，滑动/缩小不是。

以下是相关的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;
}

Answer 1

jQuery的slideUp()，slideDown()和slideToggle()不适用于 IE7 中的 position:relative 元素。可以通过添加

来解决一些幻灯片问题

zoom: 1;

滑动容器和/或元素。

我们不得不恢复使用＆lt; table＆gt;用于布局来解决一些滑动问题。

Answer 2

在我的示例中出现此行为的原因是IE无法识别我用于触发.slideUp / Down的.focus。我找到了解释问题here的一个很好的答案，但是这允许你在焦点上添加一个CSS类，但我需要在.focus上使用slideUp / Down设置一个单独的元素，这样CSS类就不会帮助我的情况，有人有想法吗？

知道了！我不得不使用mouseenter而不是focus，但这里是完成的脚本，带有魔鬼的条件mouseenter事件，a.k.a。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");
});

});

jQuery slideDown / slideUp在IE7中不起作用

2 个答案: