Firefox 中全屏 Bootstrap 轮播插件的问题答案

【问题标题】：Issues with fullscreen Bootstrap carousel plugin in FirefoxFirefox 中全屏 Bootstrap 轮播插件的问题
【发布时间】：2015-08-19 18:09:07
【问题描述】：

所以我对 jQuery 和 javascript 还是很陌生，所以当插件在 Firefox 中运行时，我试图弄乱代码来解决我的问题。没有骰子，所以我来这里是为了获得一些建议（也许是关于为什么会出现以下问题的解释）。

这里的问题是我还有一些其他的 Div，在包含轮播的下面。在 Firefox 中，它最终用透明度替换了我所有的其他图像和颜色背景，显示了我所有内容背后的轮播。

这是插件的代码：

$('.header-carousel').carousel({
    pause: "false",
    interval: 4000
});

$('.header-carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
$('.header-carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
$('.carousel-inner div.item img').each(function() {
    var imgSrc = $(this).attr('src');
    $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
    $(this).remove();
});

$(window).on('resize', function() {
    $('.header-carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
});

希望我能够有效地解释这一点，我已经为这个问题苦苦挣扎了好几天......

编辑：

我在 jsfiddle 上做了一个例子。强制轮播在滚动时不固定在背景上的最佳方法是什么？

https://jsfiddle.net/pavelcreates/8nxwzgjz/

【问题讨论】：

我建议你要么在 JS Fiddle 中发布你的代码，要么提供你的 HTML 和 CSS，以便人们可以更好地帮助你。

标签： javascript jquery css twitter-bootstrap firefox

【解决方案1】：

我通过添加 z-index 规则解决了这个问题：

.header-carousel { z-index: -101; }

Bootstrap 的轮播喜欢把他们的图片扔到z-index: -100;，所以把全屏轮播扔到它后面解决了我之前缺少背景图片和颜色的所有问题。

【讨论】：