IE 11でFlexboxレイアウトが破損しています。プレフィックスが機能しません。

Question

Flexboxを使用している素材カードのレイアウトがあり、Chrome/FF/Safariで正常に動作します。

私は以前Flexboxを使用していましたが、これはautoprefixerを使用するだけでIE10に戻りましたが、何らかの理由でこれが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>

Answer 1

問題は接頭辞ではありません。問題は、ブートストラップ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?

：これは既知の問題のようです。 IE11のheight: autoは画像を最大にすることを可能にしています。固定された高さ（demo）、フレックスコンテナの入れ子、またはイメージの高さを定義するその他の方法を試してみることもできます。