Html Internet Explorer未正确显示行中的div

不幸的是，我必须支持IE（10+9）的更高版本，并且当前的设置中有div，这些div在除IE9之外的所有浏览器中都能正确显示。我有4张卡片排成一行，IE 10显示ok，但在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保留在新浏览器中。

我相信这应该是可行的。我没有访问IE9或IE10的权限，所以您需要自己测试

.wrapper{
宽度：1200px；
保证金：自动；
}
@支架（显示器：-ms flexbox）{
.行{
显示：-ms flexbox；
右边距：-10px；
左边距：-10px；
}
}
@支架（显示：flex）{
.行{
显示器：flex；
右边距：-10px；
左边距：-10px；
}
}
.row-show-4{
宽度：100%；
}
.卡片{
位置：相对位置；
填充：0 10px；
浮动：左；/*在使用flexbox时将被忽略*/
宽度：25%；
高度：50px；/*使其可见*/
背景色：灰色；/*使其可见*/
}

---

使用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>

.包装纸{
宽度：1200px；
保证金：自动；
}
.行{
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
右边距：-10px；
左边距：-10px；
}
.row-show-4{
宽度：100%；
}
.卡片{
位置：相对位置；
填充：0 10px；
浮动：左；
宽度：24%；
背景颜色：灰色；
边缘顶部：10px；
左边距：10px；
}
AA
BB
科科斯群岛
DD
AA
BB
科科斯群岛
DD
AA
BB
科科斯群岛
DD

输出如下所示：

---

谢谢大家的回复，我最后做的是给卡片设置一个高度，这样就解决了单独一张卡片出现在一行上的问题

@c-c我认为IE9不支持@c-c，IE不支持flex，甚至IE也提供部分支持。我建议您使用“.row”上的display:table和“.card”上的display:table单元格。所以你可以实现你想要的。找到一个，希望这会有帮助；）祝贺你。我建议你试着在48小时后将这个答案标记为这个问题的可接受答案，如果可以标记的话。它可以在将来帮助其他社区成员解决类似的问题。谢谢你的理解。

    <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>