Question

我有以下code snippet在chrome上呈现完全正常，但在IE11上.wrapper div元素的高度未正确计算。

IE11的解决方案需要什么？我试过四处寻找修复但却无法找到明确修复这个问题的那个。

Answer 1

从flex:1 .container中移除css解决了问题

Answer 2

删除display：flex; flex;选择器.container的1 css行

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>

Answer 3

作为https://caniuse.com/#search=flexbox（参见已知问题）：

在IE10和IE11中，带有display：flex和flex-direction：column的容器将无法正确计算其弯曲的儿童＆＃39;如果容器具有最小高度但没有明确的高度属性，则为size。

IE11 div高度计算不正确

3 个答案: