我创建了下面的页面,我希望我的绿色div向下扩展而不影响下面的行。为此,我为 .grid_cell div设置了 max-height:164px; 样式,以便grid_cell类中包含的所有内容都将向下溢出,而不会更改grid_cell的高度。有什么办法可以使它像在Chrome中一样在IE 11中运行?如果您在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>
答案 0 :(得分:3)
即使在IE 11中,也可以正确应用max- CSS。
但是IE11认为兄弟元素具有相同的z-index,因此它们在视图中不可堆叠。
如果要在IE中正确显示该页面,请按如下所示编辑CSS:
.grid_cell {
width: 144px;
height: 165px;
}
.profile_container {
position: absolute;
}