Question

旋转木马具有下一张和上一张图像的图像预览。选择上一个或下一个应该会导致平滑过渡到预览图像。

此CSS适用于Chrome 58，Firefox 53和Edge 40，但在IE 11中完全混乱。

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 100%;
}

@media (min-width: 768px)
{
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {

        -webkit-transform: translateX(33%);
        transform: translateX(33%);
    }
    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {

        -webkit-transform: translateX(-33%);
        transform: translateX(-33%);        
    }
}

代码主要来自：How to display previous and next images with a Bootstrap carousel

我发现以下内容适用于IE11，但在测试的其他任何内容中都非常糟糕。

.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right{ left:  33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }


.carousel-inner:before {
    position:absolute;
    top:0;
    bottom: 0;
    right: 100%;
    left: 0;
    content:"";
    display:block;
    background-color: #FFFFFF;
    z-index: 2;
}
.carousel-inner:after {
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 100%;
    content:"";
    display:block;
    background-color:#FFFFFF;
    z-index: 2;
}

代码主要来自：Bootstrap Carousel showing next and previous image

是否有办法将两种样式合并为适用于每个浏览器的单个样式，或者，如果有（合理的）方式进行浏览器检测并仅为该CSS提供服务，我对此持开放态度。根据我的理解，解析用户代理字符串并不理想，也没有使用＆＃39; CSS Hacks＆＃39;区分浏览器。

http://jsbin.com/rifoqecaku/edit?css,output IE CSS被评论。

注意：原因＆＃39; {＆＃39;在新的一行是它包含我从它的源编辑的代码。否则，它应该是原始的准确。这样做是为了帮助我阅读代码。

Answer 1

修改CSS以使用

包装IE部分

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

除了将以下内容添加到IE CSS

之外

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {

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

    -webkit-transform: translateX(-0%);
    transform: translateX(-0%);

}

和也将IE CSS移动到其他所有CSS 之下似乎已经完全解决了我的问题。还剩下的是当屏幕尺寸太小时处理IE转换。在其他任何事情中，它移除左右窗口，只留下中间窗口，并继续正常行动。在IE中，它删除了那些窗口，但转换开始大约一半，虽然只是快速浏览，但它似乎并不一致。我不会为了这一个细节而烦恼。

这似乎只影响IE的过渡。我已经在几种桌面浏览器中测试了宽度较低的版本，以及Android上的Firefox，Chrome和三星互联网。

仅使用媒体查询是不够的，您必须删除translateX（）。

Carousel CSS在IE 11中运行但没有别的，不同的CSS在除了IE之外的所有内容中都可以工作

1 个答案: