0
我爲我的網頁的一部分使用了flex，但它在IE中看起來不太好。什麼是最好的解決方案？ 
適用於IE的Flex盒子修復程序？
演示：https://jsfiddle.net/8otrpjt8/
/* 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 {
\t -webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
\t margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
\t width:100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
\t flex-flow: column nowrap;
}
.flex-grow {
\t 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>
非常感謝，@Ketan - 將嘗試剛纔:-) – michaelmcgurk
Aaaand它的工作原理 - 太棒了，@ketan - 謝謝:) – michaelmcgurk