Nivo slider display issue in IE

问题

I'm using nivo slider for an image slideshow. All looks good in FF, Chrome etc. It is displaying very strangely in IE though (see attached) (tested on 8(xp) + 9(win7)).

Has anyone come across this before?

Here's the code:

<div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">

                    <img src="pathtoimage" alt="" />
                            <img src="pathtoimage" alt="" />
                       <img src="pathtoimage" alt="" />
                            <img src="pathtoimage" alt="" />

            </div>
        </div>

$('#slider').nivoSlider({
            effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 500, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: false, // Next & Prev navigation
            directionNavHide: true, // Only show on hover
            controlNav: true, // 1,2,3... navigation
            controlNavThumbs: false, // Use thumbnails for Control Nav
            pauseOnHover: true, // Stop animation while hovering
            manualAdvance: false, // Force manual transitions
            prevText: 'Prev', // Prev directionNav text
            nextText: 'Next', // Next directionNav text
            randomStart: true, // Start on a random slide
            beforeChange: function(){}, // Triggers before a slide transition
            afterChange: function(){}, // Triggers after a slide transition
            slideshowEnd: function(){}, // Triggers after all slides have been shown
            lastSlide: function(){}, // Triggers when last slide is shown
            afterLoad: function(){} // Triggers when slider has loaded
        });

#slider { height: 309px; }
    .nivoSlider {position:relative; background:url(../thirdparty/nivo-slider/themes/bar/loading.gif) no-repeat 50% 50%; width:640px; height: 309px; box-shadow: none !important; float: left}
    .nivoSlider img {position:absolute; top:0px; left:0px; display:none;}
    .nivoSlider a {border:0; display:block;
    }

    .sliderSurround{position: relative; width: 640px; height: 309px;}
    .nivo-controlNav{position: absolute; bottom: 0; right: 0; z-index: 999;}
        .nivo-control{background-image: none !important; background-color: #E00019 !important; cursor: pointer;}
        .nivo-control.active{background-color: #fff !Important}
        .theme-default .nivo-controlNav a{height: 16px !important; width: 16px; margin:0 4px;}
        .theme-default .nivo-controlNav{padding: 15px 10px !important}

回答1:

I noticed that the number of repeating image sections (15) correlated with the default "slices" setting in. I changed it to 1 and it solved the issue.

$('#slider').nivoSlider({
            effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
            slices: 1 // For slice animations
});

回答2:

I know it's pretty basic, but did you by any chance try one of the themes? All the small, IE specific fixes are in nivo-slider.css, the main css, and if you want a theme you also have to add the theme's css. I had the same symptoms, and that was my answer ^_^

So, to be clear, if you went with one of the themes, you css link rels should look like this:

link rel="stylesheet" type="text/css" href="/css/nivo-slider.css"

link rel="stylesheet" type="text/css"
href="/css/nivo-slider-themes/default/default.css"

(fixing this may also make the caption box "appear" in Chrome and FF)

来源：https://stackoverflow.com/questions/11839842/nivo-slider-display-issue-in-ie

标签

jquery

nivo-slider