CSS：Flex 在 IE11 中不为 div 保持相同的高度

CSS: Flex doesn't keep same height for divs in IE11

提问人：spidey677 提问时间：3/10/2022 最后编辑：Kameronspidey677 更新时间：3/10/2022 访问量：181

问：

我目前正在显示 3 个图块，这些图块会根据哪个图块的内容最多来调整并保持相同的高度。display: flex;

下面的HTML / CSS适用于除IE11以外的所有浏览器，我无法弄清楚为什么。

我试着添加到我的班级中，但这会使所有容器的高度保持不变，并且还提高了高度，所以这不是我想要的。min-height: 100vh;richTextOne

min-height: inherit;在我的班级中，使容器不都具有相同的相同高度。每个图块 div 中的高度与其中的内容量相同。richTextOne

任何帮助都不胜感激。

谢谢！

.flex-box {
  width: 100%;
  min-height: 345px;
  display: flex;
  flex-direction: row;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
}

.richTextOne {
  flex: 1 auto;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}
<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
  <!--/* Tile 1 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah</p>
    </div>
  </div>

  <!--/* Tile 2 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah</p>
    </div>
  </div>

  <!--/* Tile 3 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah blah blah blah blah blah blah</p>
    </div>
  </div>
</div>

HTML CSS 互联网浏览器 FlexBox

评论

0赞 Dai 3/10/2022
我真的很好奇你为什么以IE11为目标？
0赞 spidey677 3/10/2022
@Dai因为我的客户想要。
0赞 Dai 3/10/2022
好的，那么为什么你的客户想要它呢？如果他们只是在没有给出充分理由的情况下这么说，那么你就有职业道德义务来反击并告知客户他们正在对他们希望你做的工作做出不明智的决定：因为否则（没有充分的理由，我认为他们没有）让你浪费时间解决没有人会遇到的错误只会花费他们的钱。
0赞 spidey677 3/10/2022
@dai 我们的许多监督客户都使用 IE11，因此我们现在必须支持它。
1赞 spidey677 3/10/2022
@カメロン解决了。在我的 flex-box div 上，我需要添加 align-items：stretch;问题解决了。

答：

0赞 Kameron 3/10/2022 #1

添加到您的 flex 父级。align-items: stretch;

.flex-box {
  width: 100%;
  min-height: 345px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
  height: 100%;
}

.richTextOne {
  flex: 1 auto;
  height: 100%;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}
<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
  <!--/* Tile 1 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah</p>
    </div>
  </div>

  <!--/* Tile 2 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah</p>
    </div>
  </div>

  <!--/* Tile 3 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah blah blah blah blah blah blah</p>
    </div>
  </div>
</div>

评论

0赞 spidey677 3/10/2022
我试过了，但没有用。内容出现，但由于某种原因，高度并不完全相同。还有其他想法吗？
0赞 Kameron 3/10/2022
@spidey677 尝试将其添加到.richTextOne
0赞 spidey677 3/10/2022
我还添加了它，现在它为较小的 div 添加了更多空间，但它仍然不等于内容最多的 div。不知道发生了什么。.richTextOne
0赞 Kameron 3/10/2022
@spidey677 试一试 - 最近的编辑应该可以解决问题。
0赞 Kameron 3/10/2022
@spidey677 这也不行吗？老实说，我的系统上也没有 IE，但我过去在 IE 上使用 flex 时遇到过这个错误，这为我解决了这个问题。
0赞 A Haworth 3/10/2022 #2

IE11 中有很多与 flex 相关的错误。

查看 https://caniuse.com/?search=flex

特别是似乎与您的代码相关的内容：

在 IE10 和 IE11 中，如果容器具有 min-height 但没有显式 height 属性，则具有 display： flex 和 flex-direction： 列的容器将无法正确计算其弯曲子级的大小。

0赞 DreamCode 3/10/2022 #3

我的系统上没有 Internet Explorer 11，但我注意到您修复了磁贴等的宽度，因此如果调整页面大小，它会错位。

在下面测试我的代码，看看它是否适用于 ie11

<style>

    *, *::after, *::before {
        box-sizing: border-box;
    }

    .flex-box {
    width: 100%;
    min-height: 345px;
    display: flex;
    flex-direction: row;
    }

    .tile {
        display: inline-block;
        width: 33%;
        padding-bottom: 0px;
        margin-left: 1px;
        margin-right: 61px;
        background-color: #e2e2e2;
    }
        .tile:last-child {
            margin-right: 0;
        }

    .richTextOne {  
        padding: 1rem;
        display: block;
    }

</style>

<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class="flex-box">
<!--/* Tile 1 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah blah blah</p>
  </div>
</div>

<!--/* Tile 2 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah</p>
  </div>
</div>

<!--/* Tile 3 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah blah blah blah blah blah blah blah blah</p>
  </div>
</div>

如果您有任何问题，请随时提问。

0赞 Yu Zhou 3/10/2022 #4

你的意思是IE中的瓷砖不服从吗？除此之外，我在 IE 11 中没有发现其他问题。min-height: 345px

如果你指的是这个问题，你可以参考这个文档。解决方法是在以下周围添加一个 flex 列包装器：min-heightflex-box

.flex-box {
  width: 100%;
  min-height: 345px;
  display: flex;
  flex-direction: row;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
}

.richTextOne {
  flex: 1 auto;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}
<div style="display: flex; flex-direction: column;">
  <div class="flex-box">
    <!--/* Tile 1 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah blah blah</p>
      </div>
    </div>

    <!--/* Tile 2 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah</p>
      </div>
    </div>

    <!--/* Tile 3 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>

评论

0赞 spidey677 3/10/2022
谢谢你,先生。今天早上居然解决了。我需要添加''align-items： stretch;''。问题解决了。
0赞 spidey677 3/10/2022 #5

在我的 div 上，我需要添加以使子 div 的高度相等。谢谢大家！flex-boxalign-items: stretch;

上一个：有没有办法将CSS属性纯粹设置为其他浏览器不兼容的后备？

下一个：AutoCompleteExtender 隐藏在 IE 中，但在 Edge 中工作