IE11 div高度计算不正确
[英]IE11 div height is not calculated correctly
问题描述
I have the following code snippet which renders perfectly fine on chrome, however on IE11 the height of .wrapper div element isn't being calculated correctly. 
我有以下代码片段 ，在chrome上可以完美呈现，但是在IE11上， .wrapper div元素的高度未正确计算。
what would the fix for IE11 entail? IE11的修复需要什么？ I've tried looking around for fixes but couldn't find the one that definitively fixes this issue. 我曾尝试四处寻找修复程序，但找不到能完全解决此问题的修复程序。
3 个解决方案
解决方案1
2 2017-08-01 06:24:03
从您的.container css删除flex:1解决了该问题
解决方案2
2 已采纳 2017-08-01 06:38:06
Remove display:flex; 删除显示：flex; flex;1 css line for selector .container flex; 1 CSS线用于选择器.container
body { background-color: gray; } .wrapper { display: flex; flex-direction: column; flex: 1; flex-wrap: nowrap; background-image: linear-gradient(90deg, #f17e5d 35%, #f6d365 100%); padding: 80px 0px; padding-left: 10px; padding-right: 10px; justify-content: center; } .container { background: #fff; padding: 20px; border-radius: 4px; justify-content: center; align-self: center; width: 455px; top: 5px; position: relative; flex-direction: column; } .headline { padding: 20px; background: #fff; margin-bottom: 20px; border-radius: 4px; } .orderedList { font-style: italic; font-size: 16px; color: black; padding: 18px; position: relative; top: -28px; margin: 0; } .listItem { padding: 0 5px; } .listContent { padding: 1px; font-style: normal; color: black; margin-left: 5px; white-space: pre-line; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="headline"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to . Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to . </div> <div class="wrapper"> <div class="container"> <ol class="orderedList"> <li class="listItem"> <p class="listContent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </p> </li> <li class="listItem"> <p class="listContent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </p> </li> <li class="listItem"> <p class="listContent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </p> </li> <li class="listItem"> <p class="listContent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </p> </li> </ol> </div> </div> </body> </html>
解决方案3
1 2017-08-01 06:24:13
As https://caniuse.com/#search=flexbox (see Known Issues): 作为https://caniuse.com/#search=flexbox （请参阅已知问题）：
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.