為什么max-height在Chrome中有效但在IE 11中無效？

Question

我創建了下面的頁面，我希望我的綠色div向下擴展而不會影響下面的行。 為了達到這個目的，我設計了帶有max-height的.grid_cell div ：164px; 這樣grid_cell類中包含的任何內容都會向下溢出而不會改變grid_cell的高度。 有什么方法可以讓它在IE 11中以Chrome的工作方式運行嗎？ 如果你在IE 11中打開這個頁面，你會注意到當你將鼠標懸停在一個div上時，它會向下推動它下方的div，但是在Chrome中不會發生這種情況。 這是為什么？

https://shampouya.5gbfree.com/Test_TeamSlideshow.html

 $(window).load(function() { $('#carousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, itemWidth: 210, itemMargin: 5, asNavFor: '#slider' }); $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: "#carousel" }); }); 

 .flex-nav-prev, .flex-nav-next { display: none; } /*hide the left and right arrows*/ #BackgroundContainer { background-color: white; height: 1180px; background-size: cover; } .flexslider { margin-top: 4px; border: none !important; /*overrides the flexslider.css file style*/ } .flex-viewport { width: 820px; height: 750px; } .flex-active-slide { width: 820px; } #slider { background: none; margin-bottom: 20px; /*overrides the flexslider.css file style*/ min-height: 370px; /*no longer necessary? this reserves height for the slider and makes sure that the blurb at the bottom stays there as the page loads*/ } #carousel { height: 40px; width: 910px; margin-right: 10px; margin-bottom: 0px; background-color: transparent; } #carousel li { text-align: center; } #carousel span { font-family: comfortaa; color: #165D7A; font-size: 20px; line-height: 37px; text-align: center; } .Team_Container { margin-left: 10px; } .grid_cell { max-height: 164px; display: inline-block; position: relative; z-index: 0; margin-bottom: 17px; } .grid_cell:hover { z-index: 1; } .grid_cell div:hover { /*when the user hovers over the profile-containing div*/ height: 343px; background-color: rgba(176, 196, 222, 0.9) !important; /*purplish blue almost opaque*/ border-color: #7795BF !important; box-shadow: 0px 8px 20px 1px grey; } .grid_cell div div:hover { height: 160px; } /*when the user hovers over the picture-containing inner div*/ .profile_container { height: 163px; width: 144px; overflow: hidden; display: inline-block; vertical-align: top; background-color: rgba(207, 232, 221, 0.6); /*light green almost transparent*/ margin-right: 10px; margin-bottom: 10px; border: 2px solid #99D1E0; border-radius: 5px; text-align: -webkit-center; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .profile_container span { display: block; width: 123px; margin-bottom: 5px; text-align: center; font-family: 'Comfortaa' !important; font-weight: bold; margin-right: auto; margin-left: auto; font-size: 11px; } .profile_container .employee_name { line-height: 18px; color: #395880; font-size: 14px !important; word-spacing: 120px; width: 130px; } .profile_container .job_title { line-height: 17px; } .pic_container { height: 130px; width: 124px; border-radius: 150px; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 16px; overflow: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .profile_pic { height: 160px; } .department_description_container { width: 780px; min-height: 90px; vertical-align: middle; border-radius: 10px; background: linear-gradient(#DAE0E3, #C1D3DB); border: solid 2px #7F9AAD; padding: 10px; z-index: 0; } .department_description { font-family: comfortaa; color: #304F5E; font-size: 16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://shampouya.5gbfree.com/jquery1.9.0.min.js"></script> <link rel="stylesheet" href="https://shampouya.5gbfree.com/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" /> <script defer src="https://shampouya.5gbfree.com/flexslider.js"></script> <script defer src="https://shampouya.5gbfree.com/carousel.js"></script> <!--referred to as modernizr.js in the flexslider package--> <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'> <div id="BackgroundContainer"> <br> <div id="carousel" class="flexslider"> <ul class="slides"> <li><a href="#"><span>Department1</span></a></li> <li><a href="#"><span>Department2</span></a></li> </ul> </div> <div id="slider" class="flexslider"> <ul class="slides"> <li> <div class="Team_Container"> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person1 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person2 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person3 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person4 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person5 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person6 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person7 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person8 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person9 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person10 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person11 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person12 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person13 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="department_description_container"> <span class="department_description">Department 1 does X, Y, and Z.</span> </div> </div> </li> <li> <div class="Team_Container"> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person1 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person2 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person3 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person4 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person5 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person6 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person7 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person8 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person9 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person10 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="department_description_container"> <span class="department_description">Department 2 does U, V, and W.</span> </div> </div> </li> </ul> </div> </div> 

Answer 1

即使在IE 11中，也正確應用了max-CSS。

但IE11認為兄弟元素具有相同的z-index，因此它們在視圖中不可堆疊。

如果要在IE中正確顯示該頁面，請按以下方式編輯CSS：

.grid_cell {
  width: 144px;
  height: 165px;
}

.profile_container {
  position: absolute;
}