【发布时间】：2015-07-27 00:03:42
【问题描述】：
我已经用尽了相当多的时间来调查这个问题，但没有发现任何帮助，所以我在这里发布这个问题，希望有人可以提供帮助。
这个问题我已经有一段时间了，但终于找到了一些时间来尝试解决这个问题。几年前，我创建了基于 SharePoint 的公司内部网，它是为 IE 设计的，作为我们的公司浏览器。在过去的几个月里，用于各种进程的其他浏览器有所增加，尤其是 Chrome。
我们在 IE（9 和 11）中的主要门户上的 Nivo 滑块按预期工作。图像按设计显示和旋转。
我遇到的问题是在 Chrome 和 Firefox 中，滑块根本不显示图像。
编辑：CSS #slider {position:relative; background:#202834;} 中的这一部分强制背景颜色覆盖图像。我试图从滑块 css 中注释掉 bg 颜色，它没有解决问题，而是显示白色背景。 /编辑
图片仍然在滑块内旋转，只是图片本身没有出现，示例如下：
我在 CSS 中使用了一些选项，并将 window.load 更改为 document.ready，但无济于事。我绝对知道这是 CSS 中的这些设置之一，但很难找出哪个是罪魁祸首。
我附上了下面的脚本副本，它与在线找到的源代码几乎没有任何关系：
<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
});
});
/* Home Slider */
#slideshow {height:303px; /*background: url('../../../Images/ss_back.png') no-repeat center; margin: 0 0 10px 0;*/}
#slider {position:relative; background:#202834; }
#slider a {border:0; display:block; }
#slider img {position:absolute; top: 0; left: 0; display:none;}
.nivoSlider {position:relative; top:15px; left:16px; width:100%;}
.nivoSlider img {position: absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption {position:absolute; left:0; bottom:-55px; color:#666; font-size:14pt; width:100%; z-index:89;}
.nivo-caption p {padding:0;margin:0;}
.nivo-prevNav {left:5px;}
.nivo-nextNav {right:5px;}
.nivo-controlNav {position:absolute; right:30px; bottom:-55px;}
.nivo-controlNav a {display:block; width:31px; height:23px; background:url('../../../Images/bullets.png') no-repeat; text-indent:-9999px; border:0; float:left; position:relative; z-index:99; cursor:pointer;}
.nivo-controlNav a.active {background-position: -31px 0; font-weight:bold;}
.nivo-directionNav a {display:block; width:50px; height:50px; text-indent:-9999px; border:0; position:absolute; top:45%; z-index:99; cursor:pointer;}
a.nivo-nextNav {background: url('../../../Images/next.png'); right:40px;}
a.nivo-prevNav {background: url('../../../Images/prev.png'); left:10px;}
我使用 Firefox 运行 firebug 并显示了以下结果。它没有产生任何控制台错误，但它确实突出显示了 NivoSlider div 中的某些区域：
我注意到的最后一件事是，在 IE 开发人员工具中，文档模式设置为 IE8 标准，这很好。如果我将文档模式更改为 IE9，那么它将在 IE 中复制相同的问题。
是否有人可以从所提供的信息中确定为什么 Chrome 和 Firefox 会出现这种情况？
【问题讨论】：
标签： css google-chrome firefox nivo-slider