Javascript MVC转盘在IE11中不工作

如果这是重复的话，我很抱歉，但是我已经绞尽脑汁想弄清楚我到底错在哪里了，我真的需要一双新的眼睛。我正在构建一个MVC应用程序，我在标签中有一个3d旋转木马，用于旋转和显示一系列图像。它被插入到我的代码中，在Chrome、Edge和Firefox中都能完美工作——到目前为止，一切都很好。我遇到的问题是IE11——旋转木马只是显示为一个平面图像，在屏幕上围绕一个固定点旋转，而不是（在Chrome等上）像一系列图像一样在用户前后移动时旋转

我认为：

<div class="rowX rowImage">
    <div class="col-xs-12"  style="background-color:#54cbec;">
        <div class="container">
            <div class="row padding-bottom5px">
                <div class="col-xs-12 padding-top40px padding-bottom50px carousel" data-gap="60">
                    <figure style="float:right; width:90%;">
                        <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="A" />
                        <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" />
                        <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" />
                        <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" />
                        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" />
                        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" />
                    </figure>
                    <nav>
                        <button class="nav prev">Prev</button>
                        <button class="nav next">Next</button>
                    </nav>
                </div>
            </div>
        </div>
    </div> 

---

我还是MVC新手，这让我发疯（不过，公平地说，我可能不会在webforms中遇到同样的问题——血腥的IE）。我不能保证星期五中奖的彩票号码，但如果你能帮忙，我将终生奉献给你……

确保在Javascript中添加供应商前缀

`

函数getSupportedPropertyName（属性）{ 对于（var i=0；i

---

`

如果我将其转储到Chrome中的JSFIDLE中，它的行为与您描述IE11版本正常工作的方式有些相似，尽管更坏。我猜问题出在你的CSS中的某个地方，IE11并不完全支持这个属性。如果你能提供一个有效的版本，我可以帮你。我试图复制你的场景，但是。您能分享代码并创建一支笔吗？@jmcgriz-谢谢您的回复。我已经添加了CSS代码，希望这有帮助@pixellab-感谢您的回复。我已经添加了CSS代码，希望这有帮助！您的问题可能是IE 11上flex direction和flex的CSS支持有限。请参阅以获得更清晰的理解。尝试将项目与变换/位置对齐，以使其在IE11上工作。谢谢，这似乎有效。我忘了供应商的前缀了！

if (document.addEventListener) {
    //window.addEventListener('load', () => {
        var carousels = document.querySelectorAll('.carousel');

        for (var i = 0; i < carousels.length; i++) {
            //console.log(":" + carousels[i]);
            carousel(carousels[i]);
        }
    //});
}
$(function () {
    var carousels = document.querySelectorAll('.carousel');

    for (var i = 0; i < carousels.length; i++) {
        //console.log(":" + carousels[i]);
        carousel(carousels[i]);
    }
});

function carousel(root) {
    var
        figure = root.querySelector('figure'),
        nav = root.querySelector('nav'),
        images = figure.children,
        n = images.length,
        gap = root.dataset.gap || 0,
        bfc = 'bfc' in root.dataset,

        theta = 2 * Math.PI / n,
        currImage = 0
    ;

    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    $(window).on('resize', function () {
        setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    });
    //window.addEventListener('resize', () => {
    //    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width))
    //});

    setupNavigation();

    function setupCarousel(n, s) {
        var
            apothem = s / (2 * Math.tan(Math.PI / n))
        ;

        //figure.style.transformOrigin = `50% 50% ${-apothem}px`;
        figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

        for (var i = 0; i < n; i++)
            //images[i].style.padding = `${gap}px`;
            images[i].style.padding = gap + 'px';
        for (i = 1; i < n; i++) {
            //images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
            //images[i].style.transform = `rotateY(${i * theta}rad)`;
            images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
            images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
        }
        if (bfc)
            for (i = 0; i < n; i++)
                images[i].style.backfaceVisibility = 'hidden';

        rotateCarousel(currImage);
    }

    function setupNavigation() {
        nav.addEventListener('click', onClick, true);

        function onClick(e) {
            e.stopPropagation();

            var t = e.target;
            if (t.tagName.toUpperCase() != 'BUTTON')
                return;

            if (t.classList.contains('next')) {
                currImage++;
            }
            else {
                currImage--;
            }

            rotateCarousel(currImage);
        }

    }

    function rotateCarousel(imageIndex) {
        //figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
        figure.style.transform = 'rotateY(' + imageIndex * theta + 'rad)';
    }

}

.container {
    width: 100%;
    max-width: 1200px;
}


.container.tbl {
    width: 100%;
}

.container.tbl .td.col-dummy-spacer{
    border-style: solid;
    border-width: 0px 30px 0px 0px;
}

@media only screen and (max-width: 767px){ 
    .container.tbl.tbl-collapse-xs>.tr>.td {
        display: inline-block;
    }
    .container.tbl .td.col-dummy-spacer {
        border-width: 0px 0px 15px 0px;
    }
}

.padding-bottom5px{ padding-bottom: 5px; }
.padding-top40px{ padding-top: 40px; }
.padding-bottom50px{ padding-bottom: 50px; }

.carousel {
    padding: 20px;
    -webkit-perspective: 500px;
    perspective: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel > * {
  flex: 0 0 auto;
}

.carousel figure {
    margin: 0;
    width: 70%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

.carousel figure img {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0px;
}

.carousel figure img:not(:first-of-type) {
    position: absolute;
    left: 0;
    top: 0;
}

.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

@media only screen and (max-width: 991px) {
    .navBtn {
        display: none !important;
    }
    .navLinks {
        font-size:16px;
    }
}

function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; 
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform); 
if (transformProperty) {
    item.style[transformProperty] = "rotate(45deg)";
}