我已经用尽了相当多的时间来调查这个问题并发现没有任何帮助,所以我在这里发布问题,希望有人可以提供帮助。
我已经有这个问题已经有一段时间了但终于找到了一些时间尝试解决问题。几年前我创建了基于SharePoint的公司内部网,现在专为IE浏览器而设计。在过去几个月中,各种流程的浏览器数量都在增加,特别是Chrome。
IE(9& 11)内主门户网站上的Nivo Slider按预期工作。图像按设计显示和旋转。
我遇到的问题是在Chrome和Firefox中,滑块根本不显示图像。
编辑:CSS numpy
中的此部分强制图像上的背景颜色。我试图将滑块css中的bg颜色注释掉但尚未解决问题,而是显示白色背景。 /编辑
图像仍在滑块内旋转,只是图像本身不会出现,例如:
我在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中的某些区域:
我注意到的最后一件事是,在IE开发人员工具中,文档模式设置为IE8标准,这很好。如果我将文档模式更改为IE9,那么它将在IE中复制相同的问题。
是否有人可以从提供的信息中识别为什么Chrome和Firefox可能会发生这种情况?
答案 0 :(得分:0)
在Google Chrome中执行Inspect Element
并确保该图片中是否有背景颜色....或者更好地发布小提琴