IE中的Flexbox佈局中斷11.前綴不起作用？

我有一個材料卡布局，我使用的是Flexbox，並且它在Chrome/FF/Safari中正常工作。IE中的Flexbox佈局中斷11.前綴不起作用？

我已經使用Flexbox之前成功回到IE10只使用autoprefixer，但由於某種原因，我怎麼這只是在IE11中斷。

我的佈局目標是讓筆如同一樣的高度，即使圖像下方的卡的內容比其他卡長。儘管我們對字符的數量有一個軟限制。

您可以在此看到codepen：http://codepen.io/OMGDrAcula/pen/vXAqAR

.flex-row { 
 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
 
    display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
 
    
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-column { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
.card { 
 
    padding-bottom: 80px; 
 
    position: relative; 
 
} 
 
.card-action { 
 
    position: absolute; 
 
    bottom: 0; left: 0; 
 
    width: 100%; 
 
} 
 

 

 
/* Your untouched stuff */ 
 
.card { 
 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
} 
 

 
.card { 
 
    margin-top: 10px; 
 
    box-sizing: border-box; 
 
    border-radius: 2px; 
 
    background-clip: padding-box; 
 
} 
 
.card span.card-title { 
 
    color: #fff; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    text-transform: uppercase; 
 
} 
 

 
.card .card-image { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.card .card-image img { 
 
    border-radius: 2px 2px 0 0; 
 
    background-clip: padding-box; 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 
.card .card-image span.card-title { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 16px; 
 
} 
 
.card .card-content { 
 
    padding: 16px; 
 
    border-radius: 0 0 2px 2px; 
 
    background-clip: padding-box; 
 
    box-sizing: border-box; 
 
} 
 
.card .card-content p { 
 
    margin: 0; 
 
    color: inherit; 
 
} 
 
.card .card-content span.card-title { 
 
    line-height: 48px; 
 
} 
 
.card .card-action { 
 
    border-top: 1px solid rgba(160, 160, 160, 0.2); 
 
    padding: 16px; 
 
} 
 
.card .card-action a { 
 
    color: #ffab40; 
 
    margin-right: 16px; 
 
    transition: color 0.3s ease; 
 
    text-transform: uppercase; 
 
} 
 
.card .card-action a:hover { 
 
    color: #ffd8a6; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row flex-row"> 
 
     <!-- Card Projects --> 
 
     <div class="col-md-2 flex-column"> 
 
      <div class="card"> 
 
       <div class="card-image"> 
 
        <img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png"> 
 
        <span class="card-title">Material Cards</span> 
 
       </div> 
 
       
 
       <div class="card-content"> 
 
        <p>Cards for display in portfolio style material design by Google. Cards for display in portfolio style material design by Google. Cards for display in portfolio style material design by Google.</p> 
 
       </div> 
 
       
 
       <div class="card-action"> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2 flex-column"> 
 
      <div class="card"> 
 
       <div class="card-image"> 
 
        <img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png"> 
 
        <span class="card-title">Material Cards</span> 
 
       </div> 
 
       
 
       <div class="card-content"> 
 
        <p>Cards for display in portfolio style material design by Google.</p> 
 
       </div> 
 
       
 
       <div class="card-action"> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2 flex-column"> 
 
      <div class="card"> 
 
       <div class="card-image"> 
 
        <img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png"> 
 
        <span class="card-title">Material Cards</span> 
 
       </div> 
 
       
 
       <div class="card-content"> 
 
        <p>Cards for display in portfolio style material design by Google.</p> 
 
       </div> 
 
       
 
       <div class="card-action"> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2 flex-column"> 
 
      <div class="card"> 
 
       <div class="card-image"> 
 
        <img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png"> 
 
        <span class="card-title">Material Cards</span> 
 
       </div> 
 
       
 
       <div class="card-content"> 
 
        <p>Cards for display in portfolio style material design by Google.</p> 
 
       </div> 
 
       
 
       <div class="card-action"> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2 flex-column"> 
 
      <div class="card"> 
 
       <div class="card-image"> 
 
        <img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png"> 
 
        <span class="card-title">Material Cards</span> 
 
       </div> 
 
       
 
       <div class="card-content"> 
 
        <p>Cards for display in portfolio style material design by Google.</p> 
 
       </div> 
 
       
 
       <div class="card-action"> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2 flex-column"> 
 
      <div class="card"> 
 
       <div class="card-image"> 
 
        <img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png"> 
 
        <span class="card-title">Material Cards</span> 
 
       </div> 
 
       
 
       <div class="card-content"> 
 
        <p>Cards for display in portfolio style material design by Google.</p> 
 
       </div> 
 
       
 
       <div class="card-action"> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
        <a href="#" target="new_blank">Link</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-10-14 OMGDrAcula

可能會嘗試在你的'.flex-column'中添加'-ms-flex-direction：column'的 –

我確實修復了圖像等，但是這些列在chrome中的高度並不相同在IE 11中超級高。 – OMGDrAcula

的問題不是前綴。問題是這樣的規則在引導CSS：

.carousel-inner > .item > a > img, 
.carousel-inner > .item > img, 
.img-responsive, 
.thumbnail a > img, 
.thumbnail > img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

IE11不能識別特定尺寸的圖像上（至少不是像其他瀏覽器的方式）。這似乎是一個已知的問題：

IE doesn't support height=auto for images, what should I use?

基本上，你需要控制圖像的高度。 IE 11中的height: auto允許圖像最大化。您可以嘗試使用固定高度（demo），嵌套柔性容器或其他一些定義圖像高度的方法。

來源

2016-10-14 14:04:11

IE中的Flexbox佈局中斷11.前綴不起作用？

回答

相關問題