我创建了下面的页面，我希望我的绿色div向下展开，而不影响下面的行。为了实现这一点，我将.grid_celldiv设置为最大高度：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>即使在IE 11中，max-CSS也能正确应用。
但IE11认为同级元素具有相同的z索引，因此它们在视图中是不可堆叠的。
如果你想在IE中正确显示该页面，请编辑CSS如下：
.grid_cell {
width: 144px;
height: 165px;
}
.profile_container {
position: absolute;
}