Javascript jQuery显示隐藏元素-在ie7中跳转

我正试着制作一个简单的幻灯片，我正在努力使用InternetExplorer7

默认情况下，如果用户没有js，导航将隐藏。如果它们滑动，则箭头将淡入，该箭头在除ie7之外的所有浏览器中都能完美工作。在ie7中，整个幻灯片向下跳了几个像素——我相信这与显示有关：没有设置，然后在fadeIn中更改，但我不能完全理解

HTML:

CSS:

有人能建议解决这个问题吗？

可能是这样的：（尽管一切看起来都很完美）

尝试将Ul home幻灯片向上移动，并将导航移到其下方，看看这是否有效：

<div class="wrap">

    <ul class="home-slideshow">
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
    </ul>

    <nav class="home-slideshow">
        <a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
        <a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
    </nav>

</div> <!-- end wrap -->

您好0Neji我在我的一个项目中遇到了一些关于z索引的问题，我使用此代码片段来解决ie z索引问题：

看看这是否有效，或者你可以在这里玩数字：（我玩太多了，为我得到这项工作）

---

这似乎有效，但如果我这样做，箭头就会消失。我需要更改什么CSS才能使它们再次出现在上面？可以尝试使用z索引。提高导航的z指数，降低到ul.home-sliderThanks，这是我尝试的第一件事，但仍然没有出现。我会继续玩。实际上我只是把幻灯片和导航改为浮动，然后使用了负的上边距。不是特别漂亮，但现在效果很好。谢谢你的帮助！

// home feature slideshow

    // add navigation
    $('.arrow-right').show();

    // navigation
    $('.arrow-right').on('click', (function() {

        if ($(':animated').length) {
            return false;
        }

        ul = $('ul.home-slideshow');

        noOfSlides = 3;
        width = noOfSlides * 960;
        lastSlide = width - 960;
        currentPos = parseInt(ul.css('margin-left'));

        ul.css('width', width);

        ul.animate({
            "margin-left": currentPos - 960
        }, 1500, "easeInOutQuint", function() {

            if (ul.css('margin-left') == '-' + lastSlide + 'px') {
                $('.arrow-right').fadeOut();
            } else {
                $('.arrow-left').fadeIn();
            } // end if

        }); // end animate

    })); // end arrow-right click

    $('.arrow-left').on('click', (function() {

        if ($(':animated').length) {
            return false;
        }

        ul = $('ul.home-slideshow');

        noOfSlides = 3;
        width = noOfSlides * 960;
        lastSlide = width + 960;
        currentPos = parseInt($(ul).css('margin-left'));

        ul.css('width', width);

        ul.animate({
            "margin-left": currentPos + 960
        }, 1500, "easeInOutQuint", function() {

            if (ul.css('margin-left') == '0px') {
                $('.arrow-left').fadeOut();
            } else {
                $('.arrow-right').fadeIn();
            } // end if

        }); // end animate

    })); // end arrow-left click

/* Feature Slideshow */
ul.home-slideshow {
    height: 302px;
    overflow: hidden;
}

    ul.home-slideshow li {
        float: left;
    }

    /* Navigation */
    nav.home-slideshow {
        position: relative;
        width: 960px;
    }

    .arrow-left, .arrow-right {
        background: #003592;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        display: none;
        height: 22px;
        padding: 6px;
        top: 126px;
        position: absolute;
        width: 13px;
        z-index: 1;
    }
        .arrow-right {
            right: 0px;
        }
        .arrow-left {
            left: 0px;
        }

<div class="wrap">

    <ul class="home-slideshow">
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
    </ul>

    <nav class="home-slideshow">
        <a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
        <a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
    </nav>

</div> <!-- end wrap -->

var zIndexNumber = 1000;
$('li').each(function() {
  $(this).css('zIndex', zIndexNumber);
      zIndexNumber -= 10;
});