Question

我正在尝试整理一个简单的幻灯片，我正在与Internet Explorer 7进行一些努力。

导航默认隐藏，因为用户没有js。如果它们滑动，那么箭头将会淡入，这在所有浏览器中都能完美运行，但ie7。在ie7中，整个幻灯片向下跳了几个像素 - 我相信这与显示有关：没有设置然后在fadeIn上改变但我无法弄明白。

HTML：

<div class="wrap">

        <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>

        <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>

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

JS：

// 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

CSS：

/* 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;
        }

有人可以建议修复此问题吗？

Answer 1

可能就是这样:(虽然一切看起来都很完美）

尝试移动UI家庭幻灯片并在其下方移动导航，看看是否有效：

<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 -->

Answer 2

嗨0Neji我的一个项目中有一些带有z索引的probs我用这个代码片段来解决ie-z-index问题：

看看这是否有效，或者你可以在这里玩数字:(我也玩过这个让我的工作）

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

jQuery显示隐藏的元素 - 跳转ie7

2 个答案: