Nivo Slider在Chrome / Firefox中强制背景颜色 - IE工作正常

时间:2015-05-15 06:42:41

标签: css google-chrome firefox nivo-slider

我已经用尽了相当多的时间来调查这个问题并发现没有任何帮助,所以我在这里发布问题,希望有人可以提供帮助。

我已经有这个问题已经有一段时间了但终于找到了一些时间尝试解决问题。几年前我创建了基于SharePoint的公司内部网,现在专为IE浏览器而设计。在过去几个月中,各种流程的浏览器数量都在增加,特别是Chrome。

IE(9& 11)内主门户网站上的Nivo Slider按预期工作。图像按设计显示和旋转。

我遇到的问题是在Chrome和Firefox中,滑块根本不显示图像。

编辑:CSS numpy中的此部分强制图像上的背景颜色。我试图将滑块css中的bg颜色注释掉但尚未解决问题,而是显示白色背景。 /编辑

图像仍在滑块内旋转,只是图像本身不会出现,例如:

Example

我在CSS中使用了一些选项并将#slider {position:relative; background:#202834;}更改为window.load但无济于事。我肯定知道它是CSS中的这些设置之一,但很难找出哪一个是罪魁祸首。

我附上了下面的脚本副本,该副本几乎没有触及在线源代码:

document.ready

<script type="text/javascript">
 $(window).load(function() {

 $('#slider').nivoSlider({
    effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 300, // Slide transition speed
    pauseTime: 6000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: false, // Next & Prev navigation
    directionNavHide: false, // Only show on hover
    controlNav: true, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav: true, // Use left & right arrows
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    captionOpacity: 0.0, // Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    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
   });
});

我用Firefox运行了firebug,并在下面显示了调查结果。它没有产生任何控制台错误,但确实突出了NivoSlider div中的某些区域:

NivoSlider div

我注意到的最后一件事是,在IE开发人员工具中,文档模式设置为IE8标准,这很好。如果我将文档模式更改为IE9,那么它将在IE中复制相同的问题。

是否有人可以从提供的信息中识别为什么Chrome和Firefox可能会发生这种情况?

1 个答案:

答案 0 :(得分:0)

在Google Chrome中执行Inspect Element并确保该图片中是否有背景颜色....或者更好地发布小提琴