繁体   English   中英

为什么max-height在Chrome中有效但在IE 11中无效?

Why does max-height work in Chrome but not in IE 11?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我创建了下面的页面,我希望我的绿色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> 

1 个回复

即使在IE 11中,也正确应用了max-CSS。

但IE11认为兄弟元素具有相同的z-index,因此它们在视图中不可堆叠。

如果要在IE中正确显示该页面,请按以下方式编辑CSS:

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

.profile_container {
  position: absolute;
}
1 IE11上的.svg图片,height属性不起作用,但max-height起作用

我有一个.svg徽标,我需要在其页面上显示该徽标,发现它没有正确显示在IE11上。 其缩放比例,仅出现一部分,而其他浏览器则正确显示。 我将其height属性更改为max-height,现在看起来很好。 我找不到关于发生这种情况的适当解释。 有人可以在这里帮助我吗 在IE中无法使用 ...

4 CSS最大高度不起作用

我想让一个容器自动扩展。 为此,我想使用max-height属性。 这是我的html结构 我希望文本字段的高度扩大。 但是,设置max-height无效。 容器不改变高度。 但是,当我设置最小高度时,将应用正确的高度。 任何想法如何实现这一目标? 还有其他想法吗? ...

2011-07-08 17:38:35 1 637   html/ css
5 IE11的Flexbox最大高度问题

我正在尝试编写分为三个部分的搜索菜单。 如果没有足够的垂直空间来显示结果,则每个部件都会有一个滚动条。 在Chrome和Firefox中,每个菜单都会显示其滚动条,但在IE11上,菜单会与包装器重叠。 我编写了一个适用于Chrome和Firefox的示例(Firefox很棘手,我需 ...

8 max-height:100%在Firefox和IE上不起作用

我想使用CSS将图片扩展到浏览器的最大高度,但max-height:100%在Firefox和IE上不起作用。 两者都是最新版本。 在FF和IE上,图像以原始尺寸显示。 太大了。 max-height:100%仅对铬有效? 或对此有任何解决方案吗? 它不是用于背景图像的,所以ba ...

9 Chrome,SVG和最大高度

我在使用chrome和svgs时遇到问题。 我希望2个svg是屏幕宽度的100%,最大为400px。 因此,在移动屏幕上,它们垂直对齐,然后在桌面上,它们水平对齐。 我检查过的所有浏览器(Chrome浏览器除外)都在发生这种情况。 我将在下面解释更多。 相关SVG ...

10 为什么 max-height 和 max-width 属性可以工作

我在代码中添加了max-height和max-width属性,就像这样。 它工作正常。 但是当我查找 Microsoft Docs 时, WebControl类中没有max-height和max-width属性。 我还发现互联网上有一些解决方案喜欢使用函数来调整图像大小。 所以我很好奇为什么 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM