javascript - Slider Revolution 只出现在 Internet Explorer 中

Question

我正在工作的网站有一个 slider 革命横幅，它只在 IE 中显示。有谁知道为什么会发生这种情况？ CSS 中的某些内容似乎导致它无法显示。

这是 HTML:

<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
    <link rel="stylesheet" href="includes/plugins/revolution_slider/rs-plugin/css/settings.css">
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->   

<!-- start: MAIN CONTAINER -->
<div class="main-container">

    <style type="text/css">
    .big {
        font-size: 28px !important;
        }
    .medium {
        font-size: 22px !important;
        }
    .small {
        font-size: 18px !important;
        }   
    .bold {
        font-weight: bold !important;
        }
    .white {
        color: white !important;
        }
    .black {
        color: black !important;
        }
    .text-align-right {
        text-align: right !important;
        }
    .text-align-center {
        text-align: center !important;
        }
    .text-light {
    font-weight: lighter;
        }   

  </style>

  <!-- start: REVOLUTION SLIDERS -->
<section class="fullwidthbanner-container">
    <div class="fullwidthabnner">
        <ul>
            <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                <img src="includes/images/sliders/free-edi/background.jpg"  style="background-color:rgb(255, 255, 255)" alt="slide background"  data-bgfit="cover" data-bgposition="center bottom" data-bgrepeat="no-repeat">
                <div class="caption lfb"
                data-x="-350"
                data-y="25"
                data-speed="2000"
                data-start="100"
                data-easing="easeOutBack">
                    <img src=".../balloons-left.png" alt="Image 1" width="200px" style="width:200px;">
                </div>
                <div class="caption lfb"
                data-x="1200"
                data-y="25"
                data-speed="2000"
                data-start="100"
                data-easing="easeOutBack">
                    <img src=".../balloons-right.png" alt="Image 1" width="200px" style="width:200px;">
                </div>
                <div class="caption lft slide_title slide_item_left big bold black text-align-center"
                data-x="0"
                data-y="70"
                data-speed="1000"
                data-start="500"
                data-easing="easeOutExpo">
                    MISC TEXT
                </div>
                <div class="caption lfT slide_desc slide_item_left medium black text-align-center"
                data-x="0"
                data-y="170"
                data-speed="1000"
                data-start="1000"
                data-easing="easeOutExpo">
                    MISC TEXT
                </div>
            </li>
        </ul>
    </div>
</section>
<!-- end: REVOLUTION SLIDERS -->

在页脚 -

<script src="includes/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="includes/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

CSS

/* ---------------------------------------------------------------------- */
/*  Slider Revolution  Elements
/* ---------------------------------------------------------------------- */
.bannercontainer {
    background-color: #fff;
    width: 921px;
    position: relative;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.banner {
    width: 921px;
    height: 280px;
    position: relative;
    overflow: hidden;
}

.bannercontainer .banner > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bannercontainer .banner > ul li {
    position: absolute
}

.bannercontainer-simple {
    padding: 0px;
    background-color: #fff;
    width: 960px;
    position: relative;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.banner-simple {
    width: 960px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.fullwidthbanner-container {
    width: 100% !important;
    position: relative;
    padding: 0;
    overflow: hidden;
}
.fullwidthbanner-container .fullwidthabnner {
    width: 100% !important;
    max-height: 280px !important;
    position: relative;
    border-bottom: 1px solid #E7E7E7;
    overflow: hidden;
    background: rgb(246, 246, 246);
}
.fullwidthbanner-container .fullwidthabnner > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fullwidthbanner-container .fullwidthabnner > ul li {
    position: absolute;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {

    .banner, .bannercontainer {
        width: 760px;
        height: 396px;
    }

}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .banner, .bannercontainer {
        width: 480px;
        height: 250px;
    }

}

@media only screen and (min-width: 0px) and (max-width: 479px) {
    .banner, .bannercontainer {
        width: 320px;
        height: 167px;
    }

}
/*Revolution*/
.slide_title {
    color: #555555;
    font-family: 'Open Sans';
    font-size: 45px;
    font-weight: 300;
    text-transform: uppercase;
}
.slide_subtitle {
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: 400;
    padding: 5px;
    text-transform: uppercase;
}
.slide_list_item {
    background-color: #0088CC;
    color: #FAFAFA;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 400;
    padding: 5px;
    text-transform: uppercase;
}
.slide_desc {
    color: #7B8793;
    font-size: 14px;
    line-height: 24px;
}
.slide_desc_bordered {
    border-left: 3px solid #DDDDDD !important;
    padding-left: 5px;
}

Answer 1

最终成为 jquery.min.js v2.1.3 的问题

return window.getComputedStyle 在 Firefox 中触发错误。

添加条件 if(elem.nodeType === elem.ELEMENT_NODE) 解决了这个问题。