IE的Flex盒子修复？

Question

我在网页的一部分使用flex，但在IE浏览器中看起来并不好看。对此最好的解决方法是什么？

演示：https://jsfiddle.net/8otrpjt8/

＆＃13;

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}




.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	 margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
	flex-flow: column nowrap;
}

.flex-grow {
	display: flex;
    -webkit-flex: 2;
    flex: 2;
}

.panel-default>.panel-heading {
background:white;
border-color:white;
padding: 15px 0;
}

.panel {
border:none
}

.panel-body {
background:#eaeaea
}

.panel-body p {
margin-bottom:0;
}

.panel-footer {
display:none;
}

.row .panel div {
margin-bottom:0
}

.content-block-inner {
  color: white;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

.content-block-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: 300px;
}

article:hover .content-block-inner {
  opacity: 1;
}
article .content-block-inner {
  position: absolute;top:0;right:0;bottom:0;left:0;
}

.image-placeholder-container {
  display: inline-block;
  position: relative;
}


img.lazy-load {
    width:100%
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

<div class="row row-flex row-flex-wrap">
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div class="panel panel-default flex-col">
<div class="panel-heading">
<h4 class="service-heading">Heading</h4>
</div>
<div class="panel-img"><img class="img-responsive" src="http://placehold.it/400x400" alt="" /></div>
<div class="panel-body flex-grow">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt varius sapien, eu semper felis elementum in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam nibh lectus, pellentesque ac semper ac, blandit at dolor. Mauris condimentum, urna in tincidunt sodales, neque metus interdum eros, a commodo odio diam at nisl. Integer facilisis fermentum interdum. Vestibulum accumsan sodales convallis. Duis pulvinar vitae dui euismod lobortis. Donec nec ex congue, dictum tellus lobortis, aliquet purus. Praesent feugiat ullamcorper interdum. Nunc convallis velit rhoncus, consectetur ipsum a, convallis risus. Etiam pulvinar risus at elit porta, ac laoreet leo ultricies. Proin facilisis felis non nisl tempus blandit. Curabitur consequat sodales lacus, in fermentum arcu bibendum venenatis.</p>
</div>
<div class="panel-footer"></div>
</div>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从display: flex;移除.flex-col也可以在IE中使用。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}




.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	 margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}


.flex-col {
    flex: 1 100%;
	flex-flow: column nowrap;
}

.flex-grow {
	display: flex;
    -webkit-flex: 2;
    flex: 2;
}

.panel-default>.panel-heading {
background:white;
border-color:white;
padding: 15px 0;
}

.panel {
border:none
}

.panel-body {
background:#eaeaea
}

.panel-body p {
margin-bottom:0;
}

.panel-footer {
display:none;
}

.row .panel div {
margin-bottom:0
}

.content-block-inner {
  color: white;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

.content-block-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: 300px;
}

article:hover .content-block-inner {
  opacity: 1;
}
article .content-block-inner {
  position: absolute;top:0;right:0;bottom:0;left:0;
}

.image-placeholder-container {
  display: inline-block;
  position: relative;
}


img.lazy-load {
    width:100%
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

<div class="row row-flex row-flex-wrap">
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div class="panel panel-default flex-col">
<div class="panel-heading">
<h4 class="service-heading">Heading</h4>
</div>
<div class="panel-img"><img class="img-responsive" src="http://placehold.it/400x400" alt="" /></div>
<div class="panel-body flex-grow">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt varius sapien, eu semper felis elementum in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam nibh lectus, pellentesque ac semper ac, blandit at dolor. Mauris condimentum, urna in tincidunt sodales, neque metus interdum eros, a commodo odio diam at nisl. Integer facilisis fermentum interdum. Vestibulum accumsan sodales convallis. Duis pulvinar vitae dui euismod lobortis. Donec nec ex congue, dictum tellus lobortis, aliquet purus. Praesent feugiat ullamcorper interdum. Nunc convallis velit rhoncus, consectetur ipsum a, convallis risus. Etiam pulvinar risus at elit porta, ac laoreet leo ultricies. Proin facilisis felis non nisl tempus blandit. Curabitur consequat sodales lacus, in fermentum arcu bibendum venenatis.</p>
</div>
<div class="panel-footer"></div>
</div>
</div>

</div>