Internet Explorer 未正确连续显示 div

Question

I unfortunately have to support later versions of IE (10 + 9) and have a current setup with divs that appear correctly in all browsers except IE9. I have 4 cards in a row, IE 10 shows ok but in IE 9 the layout appears as so:

My code is as follows:

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

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

I know flexbox does not read correctly in older versions of IE, but can't figure out if that is the reason the divs won't display correctly, or if there is a fallback where I can keep flexbox as well for the newer browsers.

Answer 1

I believe this should work. I don't have access to IE9 or IE10 so you need to test this yourself.

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

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

Answer 3

After using bootstrap reference, it seems that it works well in IE 9, code as below:

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

The output like this:

Answer 4

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