html - Internet Explorer 未正确显示连续的 div

Question

不幸的是，我必须支持更高版本的 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 的回退。

标签： htmlcssinternet-explorerinternet-explorer-9

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