Internet Explorer 未正确显示连续的 div答案

【问题标题】：Internet Explorer not showing divs in a row correctlyInternet Explorer 未正确显示连续的 div
【发布时间】：2020-02-10 22:43:16
【问题描述】：

不幸的是，我必须支持更高版本的 IE (10 + 9)，并且当前设置的 div 可以在除 IE9 之外的所有浏览器中正确显示。我连续有 4 张卡片，IE 10 显示正常，但在 IE 9 中布局显示如下：

我的代码如下：

.wrapper {
width: 1200px;
margin: auto;
}

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}

.row-show-4 {
width: 100%;
}

.card {
position: relative;
padding: 0 10px;
float: left;
width: 25%;
}

HTML 标记

<div class="wrapper">
  <div class="row row-show-4">
     <div class="card"></div>
     <div class="card"></div>
     <div class="card"></div>
     <div class="card"></div>
     ...
  </div>
</div>

我知道 flexbox 在旧版本的 IE 中无法正确读取，但不知道这是否是导致 div 无法正确显示的原因，或者是否存在我可以保留 flexbox 的后备较新的浏览器。

【问题讨论】：

@c-c 我认为IE9不支持flex
@c-c，IE不支持flex，甚至IE也部分支持。我建议您在“.row”上使用 display: table 并在“.card”上使用 display:table-cell。这样你就可以实现你想要的。
找到了article，希望对您有所帮助；)

标签： html css internet-explorer internet-explorer-9

【解决方案1】：

我相信这应该可行。我无法访问 IE9 或 IE10，因此您需要自己测试。

.wrapper {
  width: 1200px;
  margin: auto;
}

@supports (display: -ms-flexbox) {
  .row {
    display: -ms-flexbox;
    margin-right: -10px;
    margin-left: -10px;
  }
}

@supports (display: flex) {
  .row {
    display: flex;
    margin-right: -10px;
    margin-left: -10px;
  }
}

.row-show-4 {
  width: 100%;
}

.card {
  position: relative;
  padding: 0 10px;
  float: left; /* Will be ignored in case of flexbox */
  width: 25%;
  height: 50px; /* To make it visible */
  background-color: gray; /* To make it visible */
}

<div class="wrapper">
  <div class="row row-show-4">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  <div class="row row-show-4">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

【讨论】：

【解决方案2】：

*{box-sizing: border-box;}
    .wrapper {width: 1200px;margin: auto;}
    .row-show-4 {width: 100%;column-count: 4;-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
    .card{position:relative;padding:0 10px;width:100%;background:#c8c8c8;height:250px;margin-bottom:10px;display:inline-block;margin-top:10px;}

【讨论】：

【解决方案3】：

使用bootstrap引用后，似乎在IE 9下运行良好，代码如下：

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .wrapper {
            width: 1200px;
            margin: auto;
        }

        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -10px;
            margin-left: -10px;
        }

        .row-show-4 {
            width: 100%;
        }

        .card {
            position: relative;
            padding: 0 10px;
            float: left;
            width: 24%;
            background-color: gray;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
    <div class="wrapper">
        <div class="row row-show-4">
            <div class="card">AA</div>
            <div class="card">BB</div>
            <div class="card">CC</div>
            <div class="card">DD</div>
            <div class="card">AA</div>
            <div class="card">BB</div>
            <div class="card">CC</div>
            <div class="card">DD</div>
            <div class="card">AA</div>
            <div class="card">BB</div>
            <div class="card">CC</div>
            <div class="card">DD</div>
        </div>
    </div>

输出如下：

【讨论】：

【解决方案4】：

感谢大家的回复，我最终做的是为卡片设置一个高度，它可以解决单独出现在一行中的卡片。

【讨论】：

恭喜。我建议您在 48 小时后尝试将此答案标记为该问题的已接受答案，当它可以标记时。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。