javascript - Jquery 幻灯片在 IE 11 中的显示方式与在 Chrome 中的显示方式不同？

Question

下面的代码显示了一个包含三张图片的 jquery 幻灯片，单击这些图片时，每张图片都会转换为视频。当我尝试在 Internet Explorer 版本 11.165 中查看页面时，将鼠标悬停在图片上时幻灯片中的左右箭头丢失。而且，当视频开始播放并且您尝试移至下一张幻灯片时，视频会向左或向右溢出。这种溢出只发生在 IE 和视频幻灯片中，而不是图片幻灯片。在 Chrome 中，我没有这个问题。如何使这些箭头在 IE 11 中可见？如何防止同时显示 2 或 3 张幻灯片的溢出？

$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider) {
            $('body').removeClass('loading');
        },
    });
});


$(document).ready(function() {

    $("#Alexandra_Saunders_image").click(function() {
        $("#Alexandra_Saunders_slide").html('<video poster="https://static.gbtimes.com/uploads/old/2017/07/02/launch-longmarch5-wenchang-july2-2017-full-cns-2_cropped.png" controls preload="none">' +
            '<source  src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">' +
            '</video>');
    });

    $("#Anthony_Salvatore_image").click(function() {
        $("#Anthony_Salvatore_slide").html('<video poster="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/24701-nature-natural-beauty.jpg/1280px-24701-nature-natural-beauty.jpg" controls preload="none">' +
            '<source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4" type="video/mp4">' +
            '</video>');
    });

    $("#Ashley_Valencia_image").click(function() {
        $("#Ashley_Valencia_slide").html('<video poster="https://cdn.allwallpaper.in/wallpapers/1280x720/12708/nature-beach-palm-trees-palms-tropics-1280x720-wallpaper.jpg" controls preload="none">' +
            '<source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_5mb.mp4" type="video/mp4">' +
            '</video>');
    });
});

 @font-face {
     font-family:"flexslider-icon";
     src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.eot") 
    /* EOT file for IE */
}
 @font-face {
     font-family:"flexslider-icon";
     src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.ttf") 
    /* TTF file for CSS3 browsers */
}
 a:hover {
    text-decoration: none !important;
}
 #WoodenBackgroundContainer{
     width: 100%;
     height: 1300px;
}
 #container{
     margin: 0 auto;
     left: 0;
     right: 0;
     width: 1000px;
     height: 1300px;
     background: linear-gradient(#88D4E6, #0C4E78) !important;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#0C4E78);
    /* For IE 11*/
     text-align: center;
     position: absolute;
}
 .flexslider{
    height: 416px;
     max-width: 746px;
     background-color: #696969;
     margin: auto;
     margin-top: 4px;
}
 .flexslider img{
    height: 416px !important;
}
 .flexslider video{
    height: 416px !important;
     width: 100%;
     object-fit: inherit
}
 

<link rel="stylesheet" href="https://www.wellframe.com/js/flexslider/flexslider.css" type="text/css" media="screen" />
<script defer src="https://www.wellframe.com/js/flexslider/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="WoodenBackgroundContainer">

    <div id="container">

        <div style="overflow: hidden; height: 480px;">
            <div class="flexslider">

                <ul class="slides">

                    <li id="Alexandra_Saunders_slide">
                        <img id="Alexandra_Saunders_image" src="https://static.gbtimes.com/uploads/old/2017/07/02/launch-longmarch5-wenchang-july2-2017-full-cns-2_cropped.png">
                    </li>

                    <li id="Anthony_Salvatore_slide">
                        <img id="Anthony_Salvatore_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/24701-nature-natural-beauty.jpg/1280px-24701-nature-natural-beauty.jpg">
                    </li>

                    <li id="Ashley_Valencia_slide">
                        <img id="Ashley_Valencia_image" src="https://cdn.allwallpaper.in/wallpapers/1280x720/12708/nature-beach-palm-trees-palms-tropics-1280x720-wallpaper.jpg">
                    </li>

                </ul>
            </div>
        </div>

    </div>

</div>

Answer 1

我会直接回答你的问题:

如何让这些箭头在 IE 11 中可见？

这里的问题是你的 font-face css。我更改了 css，使箭头在 IE 和其他浏览器中工作。

如何防止同时显示 2 或 3 张幻灯片的溢出？

在 .flexslider 上将溢出设置为隐藏。这会导致寻呼机隐藏，但您可以尝试使用相关样式以使寻呼机再次可见。

修改后的 CSS:

@font-face {
   font-family: "flexslider-icon";
   src: url('https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/fonts/flexslider-icon.eot');
   /* IE9 Compat Modes */
   src: url('https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/fonts/flexslider-icon.woff') format('woff'), /* Pretty Modern Browsers */
   url('https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/fonts/flexslider-icon.ttf') format('truetype'), /* Safari, Android, iOS */
   url('https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/fonts/flexslider-icon.svg#svgFontName') format('svg');
   /* Legacy iOS */
 }

 a:hover {
   text-decoration: none !important;
 }

 #WoodenBackgroundContainer {
   width: 100%;
   height: 1300px;
 }

 #container {
   margin: 0 auto;
   left: 0;
   right: 0;
   width: 1000px;
   height: 1300px;
   background: linear-gradient(#88D4E6, #0C4E78) !important;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#0C4E78);
   /* For IE 11*/
   text-align: center;
   position: absolute;
 }

 .flexslider {
   height: 450px;
   max-width: 746px;
   background-color: #696969;
   margin: auto;
   margin-top: 4px;

   /* set overflow to hidden to fix IE11 overflow visible bug */
   overflow: hidden;
 }

 .flexslider img {
   height: 416px !important;
 }

 .flexslider video {
   height: 416px !important;
   width: 100%;
   object-fit: inherit
 }

/* make the pager visible when overflow is hidden on the .flexslider */
.flex-control-nav{
  bottom: 0;
}

我创建了一个代码笔，因为 jsfiddle 不能很好地与 IE11 配合使用:https://codepen.io/anon/pen/qyGNzQ