IE11 div高度計算不正確
[英]IE11 div height is not calculated correctly
問題描述
我有以下代碼片段 ，在chrome上可以完美呈現，但是在IE11上， .wrapper div元素的高度未正確計算。
IE11的修復需要什么？ 我曾嘗試四處尋找修復程序，但找不到能完全解決此問題的修復程序。
3 個解決方案
解決方案1
2 2017-08-01 06:24:03
從您的.container css刪除flex:1解決了該問題
解決方案2
2 已采納 2017-08-01 06:38:06
刪除顯示：flex; 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
作為https://caniuse.com/#search=flexbox （請參閱已知問題）：
在IE10和IE11中，如果容器具有min-height但沒有顯式的height屬性，則顯示：flex和flex-direction：列的容器將無法正確計算其flexed子代的大小。
表格不在DIV中（在IE 9中有效，但在Chrome或IE11中無效）
[英]Form not staying within a DIV (Works in IE 9 but not Chrome or IE11)
具有max-height和overflow-y的DIV會導致IE11啟用窗口的垂直滾動條 - 為什么？
[英]DIV with max-height and overflow-y causes IE11 to enable window's vertical scroll-bar — why?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.