javascript - 为什么覆盖在 IE 中不起作用？

Question

我有一个叠加层。如果用户单击一个框，则叠加层会向上滑动。我现在的问题是，覆盖在 Mozilla Firefox 和 Chrome 中没有任何问题。但在 Explorer 中，叠加层遍布整个显示器。我该如何为 IE 解决这个问题？有什么我没看到的吗？或者我需要一个插件吗？

这张图片显示了我想在 IE 中工作的普通版本。目前在 IE 中看起来像这样。

    $('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.overlay').slideUp();
	$parent_box.find('.overlay').slideToggle(1000, 'swing');
    });


    $('.overlay').on('click', function() {
	$parent_box.find('.overlay').slideToggle(1000, 'swing');
    });

    .services-section {
    background-color: #E6E6E6;
    height: auto;
    }

    .services-section hr {
    border-bottom: hidden;
    width: 42px;
    margin-left: 0px;
    }

    .services-section .services-detail {
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    position: relative;
    top: 0px;
    padding: 60px 40px 60px 40px;
    margin-top: 32px;
    background-color:rgba(237, 238, 239, 0.8);
    height: 500px;
    }

    .services-section .services-detail:hover {
    box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
    top: -2px;
    background-color:#FAFAFA;
    color:#000;
    }

    .services-section .services-detail {
    font-size: 60px;
    color: #000;
    margin-bottom: 10px;
    }

    .services-section .services-detail:hover .fa {
    color: #fd2034;
     }

    .services-detail h5 {
    color: #000;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    }

    .services-detail:hover h5 {
    color: #000;
    }

    .services-detail p {
    color: #000;
    font-size: 18px;
    }

    .services-detail:hover p {
    color: #000;
    }

    .overlay{
    display: none; /* Hidden by default*/
    position: fixed; /* Stay in place*/
    z-index: 1; /* Sit on top */
    left: 0;
    bottom: 2%;
    width: 100%; /* Full width */
    height: 92%; /* Full height */
    border-radius: 10px;
    overflow: auto; /* Enable scroll if needed 
    background-color: rgb(217,217,217); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    background-color: rgb(255,255,255);
    -webkit-animation-name: slideIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
    }

    .overlay h3{
    color: black;
    text-align: left;
    margin-left: 15%;
    }

    .overlay p {
    font-size: 0.2em;
    color: black;
    float: left;
    width: 100%;
    }
    .overlay a {
    font-size: 0.8em;
    color: black;
    float:left;
    }
    .overlay-header {
    padding: 1px 16px;
    background-color: #fff;
    color: black;
    text-align: center;
    border-bottom: 2px solid #ffcc00;
    }
    .overlay img{
    width: 18%;
    float: right;
    margin: 1%;
    margin-right: -20%;
    }
    .des{
     margin: 15px;
    font-size: 1em;
    }

    .overlay:hover {
    box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
    background-color:#FAFAFA;
    color:#000;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
        <section id="provider" class="services-section section-space-padding 
    mica-bg">
              <div class="container">
			  <div class="section-title">
				<i class="fa fa-paper-plane-o"></i>
				<h3 class="white-color"><span>Blume</span></h3>
			   </div>
             <div class="col-md-4 col-sm-6 3d-hover box">
                 <div class="services-detail hover-effect-2d top">
					<i><img src="container/rfid/micarfid.png" alt="micarfid" 
              style="background-color:#ffcc00; border:5px solid #ffcc00; border-
              radius: 10px; width:200px; margin-left:-15px;"></i>
					<h5>Blume</h5>
					<hr>
					<p>This is a test for blume.</p>
				</div>
                 <div class="overlay">
                     <div class="overlay-header">
                        <img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
                         <h3>Blume</h3>
                     </div>
                    <div class="des">
                         <p>This is a test for blume.<</p>
                     </div>		
                     <div class="body col-md-10 col-sm-6">
                         
                         <a href="https://www.youtube.com/watch?v=KmufiY2VMjI" target="_blank"><p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i></a>
                    </div>
                     <div class="body col-md-10 col-sm-6">
                         <a href="https://www.youtube.com/watch?v=KmufiY2VMjI" target="_blank"><p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i></a>
                    </div>
                     <div class="body col-md-10 col-sm-6">
                         <a href="https://www.youtube.com/watch?v=KmufiY2VMjI" target="_blank"><p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i></a>
                    </div>
                     <div class="body col-md-10 col-sm-6">
                         <a href="test.txt"><p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i></a>
                         
                         <img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
                     </div>
                 </div>
            </div>
        </div>
    </section>
      <!-- Provider Section End -->


    <!-- Back to Top Start -->
    <a href="#" class="scroll-to-top"><i class="fa fa-long-arrow-up"></i></a>
    <!-- Back to Top End -->



    <!-- All Javascript Plugins  -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/plugin.js"></script>
      
    <!-- Main Javascript File  -->
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript" src="js/js.js"></script>

Answer 1

这个问题很可能是由于在您的叠加层元素中使用了 position: fixed 造成的。

位置固定元素的几何图形在历史上与初始包含 block (通常是视口(viewport))相关。

https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

对于完整的跨浏览器实现，请尝试使用 position:absolute，确保包含元素 (div.box) 使用 position:relative。