Question

我创建了这个滑块：http://aszx.altervista.org/ytestfluid/

它在chrome中运行良好，但在firefox中运行不正常。有人可以告诉我为什么吗？

HTML，CSS，JS：

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
    width: 25%;
}



    $('#myCarousel').carousel({
        interval: 10000
    })
    $('.carousel .item').each(function() {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });

Answer 1

实际问题是你的自定义css与bootstrap上设置的基本样式冲突，下面的css对我来说很好。用您自定义的css替换下面的css，如下所示。

<select ng-model="yearSem" ng-show="integrated" ng-change="enrollCtrl.sendYearAndSem()">
       <option value="Past" ng-selected="true"> Past Semesters </option>
       <option value="Current"> Current Semester </option>
       <option ng-repeat="sem.sem in offSemList" value="{{sem.sem}}"> {{sem.sem}} </option>
</select>

替换为

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

为什么这个滑块在firefox中不起作用？

1 个答案: