bootstrap carousel translate3d覆盖不适用于firefox，IE

Question

我一直在尝试修改Bootstrap 3.3.5 Carousel以显示多个图像而不是标准单个图像。该方法涉及覆盖幻灯片操作的库存translate3d变换值以使其在图像之间移动时一次只前进一个。我使用了this post的转换覆盖和自定义。这是我基本设置的pen。

一切正常，直到我在firefox（以及IE）中尝试它。 translate3d效果根本不起作用。从我读过的有关translate3d firefox's implementation的内容来看，它应该有效（v41.0.2）。我原本以为FF不喜欢这个百分比，但我刚才提到的链接只说没有tz值的百分比。所以我不知道为什么它不起作用。

我是一个巨大的菜鸟，所以我猜测有人会只看一眼并且打击我的脑海，但我真的想知道为什么它会在我转向其他方法之前发生。

如果你有时间，我感谢任何意见，谢谢。

这是我的代码（codepen版本的工作方式应该如此，但这里的嵌入代码片段并不是出于某些原因）

var mod_screen = function() {
    
    /* Cleanup extra divs that were added in previous resizing  */
    $('.item').each( function (){
        $(this).children('div:not(:first)').remove();  
    });
    
    $('.carousel .item').each(function(){
        
        var next = $(this).next(), i;
        
            
        if (Modernizr.mq('(min-width: 768px) and (max-width: 991px)')) {
        
            /* Small screen sizes */
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

        } else if (Modernizr.mq('(min-width: 992px) and (max-width: 1199px)')) {
        
            /* Medium screen sizes */
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (i=0;i<1;i++) {
                next=next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));
            }
            
        } else if (Modernizr.mq('(min-width: 1200px)')) {
        
            /* Large screen sizes */
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (i=0;i<2;i++) {
                next=next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));
            }
        }
    });
}

$(function() {
// Call on every window resize
$(window).resize(mod_screen);
// Call once on initial load
mod_screen();
});

@media screen and (min-width: 768px) and (max-width: 991px) {
    
    .carousel-inner .active.left { left: -50%; }
    .carousel-inner .next        { left: 50%; }

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(50%, 0, 0);
    -webkit-transform: translate3d(50%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .carousel-inner .active.left { left: -33.3333%; }
    .carousel-inner .next        { left: 33.3333%; }

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(33.3333%, 0, 0);
    -webkit-transform: translate3d(33.3333%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-33.3333%, 0, 0);
    -webkit-transform: translate3d(-33.3333%, 0, 0);
    }   
}

@media screen and (min-width: 1200px) {
    .carousel-inner .active.left { left: -25%; }
    .carousel-inner .next        { left: 25%; }

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(25%, 0, 0);
    -webkit-transform: translate3d(25%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-25%, 0, 0);
    -webkit-transform: translate3d(-25%, 0, 0);
    }   
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row carousel slide" id="index-carousel-lg">
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=01" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=02" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=03" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=04" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=05" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=06" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=07" class="img-responsive"></a>
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a href="#"><img src="http://placehold.it/475x150&text=08" class="img-responsive"></a>
                </div>
            </div>
        </div>
    <a class="left carousel-control" href="#index-carousel-lg" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
    <a class="right carousel-control" href="#index-carousel-lg" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

Answer 1

所以我已经解决了这个问题，但我并不完全确定为什么会这样。我添加了三个不包含transform: translate3D的单独媒体查询，并且我已更改现有媒体查询以检查transform-3D支持。标记没有变化，Javascript也没有变化。现在看来Firefox和IE都很满意。就像我说的，我不知道为什么FF在我的代码中不支持translate3D，当文档说它的时候。如果有人能够告诉我为什么它不起作用我会很感激。这是更新后的pen

@media all and (min-width: 768px) and (max-width: 991px) {
    .carousel-inner > .next { left: 50%; }
    .carousel-inner > .prev { left: -50%; }
    .carousel-inner > .active.left { left: -50%; }
    .carousel-inner > .active.right { left: 50%; }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
    .carousel-inner > .next { left: 33.3333%; }
    .carousel-inner > .prev { left: -33.3333%; }
    .carousel-inner > .active.left { left: -33.3333%; }
    .carousel-inner > .active.right { left: 33.3333%; }
}
@media all and (min-width: 1200px) {
    .carousel-inner > .next { left: 25%; }
    .carousel-inner > .prev { left: -25%; }
    .carousel-inner > .active.left { left: -25%; }
    .carousel-inner > .active.right { left: 25%; }
}

@media all and (min-width: 768px) and (max-width: 991px) and ((transform-3d), (-webkit-transform-3d)) {
    
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(50%, 0, 0);
      -webkit-transform: translate3d(50%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-50%, 0, 0);
      -webkit-transform: translate3d(-50%, 0, 0);
    }
}

@media all and (min-width: 992px) and (max-width: 1199px) and ((transform-3d), (-webkit-transform-3d)) {

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(33.3333%, 0, 0);
      -webkit-transform: translate3d(33.3333%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-33.3333%, 0, 0);
      -webkit-transform: translate3d(-33.3333%, 0, 0);
    }   
}

@media all and (min-width: 1200px) and ((transform-3d), (-webkit-transform-3d)) {

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(25%, 0, 0);
      -webkit-transform: translate3d(25%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-25%, 0, 0);
      -webkit-transform: translate3d(-25%, 0, 0);
    }   
}