带有 Internet Explorer 的 jquery Nivo 滑块答案

【问题标题】：jquery Nivo slider with Internet explorer带有 Internet Explorer 的 jquery Nivo 滑块
【发布时间】：2013-01-03 15:55:19
【问题描述】：

我在使用旧的 Internet Explorer 时遇到了 jquery 问题（我已经在 IE7、IE8 和 IE9 中对其进行了测试，它们都产生了同样的问题）。我正在为网站使用 Nivo Slider 插件。只有在 IE 中才会出错。不知何故，图像复制了自己并将其粘贴在一起（对不起，我的英语不好，您可以在图片上看到下面的问题）。

滑块中的图像应如下所示：

滑块中的图像在 Internet Explorer 中的外观：

你可以在这里找到我的代码：http://jsfiddle.net/skeurentjes/YszGW/10/

这是我的 Nivo Slider 配置：

$(document).ready(function() {    
    $('#photoSlider').nivoSlider({
        effect: 'fade',
        animSpeed: 1000,
        pauseTime: 5000,
        directionNav: true,
        controlNav: true,
        pauseOnHover: true,
        randomStart: true
});
});

我不知道去哪里找。我不知道这是javascript问题还是css问题。每一个帮助将不胜感激。

【问题讨论】：

首先，请正确使用jsFiddle；注意最左边的面板。 jsfiddle.net/YszGW/11
我注意到您的 jsFiddle 演示中的 CSS 缺少通常包含在 Nivo 中的默认 CSS 文件。您手动输入的 CSS 似乎比默认的 Nivo CSS 大幅缩减。根据我的经验，忽略默认 CSS 似乎总是会导致许多 jQuery 滑块插件出现奇怪的问题。放回 Nivo 的所有默认 CSS，看看是否可以修复它。

标签： jquery css internet-explorer nivo-slider

【解决方案1】：

编辑：@Sparky 指出我的回答没有帮助，因为您在所有版本的 IE 中都遇到了问题，在这种情况下，尾随逗号修复无济于事。我很抱歉。

但是，我发现一些用户遇到了与您相同的问题。看起来像指定 slices: 1 而不是将其保留为默认值似乎可以修复它。下面引用的线程。

Nivo slider display issue in IE

EDIT2：Sparky 在下面的 cmets 中提出了另一个好点。即使更改切片“修复”了问题，也并不意味着它摆脱了原来的问题。 Nivo 滑块带有 CSS，可以确保它在不同的浏览器中看起来和运行良好，所以如果你删除了这些，它肯定会导致这些问题。我会先尝试放回默认 CSS，以确保您按照开发人员的意图使用插件。

如果这不起作用，希望切片修复会为您解决问题。

【讨论】：

我关注了您的link，然后关注了您链接中的link。这似乎是一个“死后逗号”问题，它只会影响 IE 7（也如您的链接中所示）。 OP 在 IE 的所有版本中都存在问题...您能提供任何文档来支持吗？
你说得对，这是我引用的死亡逗号结尾的问题，但无济于事。不过还有其他人有同样的问题，似乎他们已经解决了。见编辑。
查看the code，slices 没有默认设置，因此不确定当 OP 首先不使用该选项时slices: 1 如何解决任何问题。我和许多其他人一样，已经设法在没有任何 IE 问题的情况下使用 Nivo，所以 OP 做错了什么。
我自己在很多项目中都使用过 Nivo 滑块，并且在任何浏览器上都没有遇到过问题（这就是我非常喜欢它的原因）。不知道为什么它现在会出现问题，但我猜你对 OP 删除默认 CSS 是正确的。我敢打赌，放回默认 CSS 会很好地修复它，而不必使用意外的 hack。
谢谢各位，问题解决了。一位同事在我不知道的 nivo 滑块 CSS 文件中进行了一些更改（他也忘记了：S）。我把原来的 CSS 文件放回去了，我知道它的工作原理就像一个魅力，即使在 Internet Explorer 中也是如此。

【解决方案2】：

我也一样。我在网上读到添加“height：auto;”到“.nivoslider img”会工作，但对我来说没有。奇怪的是，在 IE 中起作用的是以下设置：

$('#idOfSlider').nivoSlider({ 切片：1， ..., 随机开始：真， ... });

将 1 个切片（当然在您的代码中还有更多切片）与 randomStart 的组合起到了作用。

【讨论】：