html - IE 11 中的 Flexbox 布局中断。前缀不起作用？

Question

我有一个 Material 卡布局，我正在使用 Flexbox，它在 Chrome/FF/Safari 中运行良好。

我之前使用过 Flexbox，仅通过使用 autoprefixer 就成功回到了 IE10，但由于某种原因，我在 IE11 中如何使用它就中断了。

我的布局目标是让卡片像笔中一样高度相同，即使图像下方卡片的内容比其他卡片长。尽管我们对字符数量有一个软限制。

你可以在这个代码笔中看到: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

问题不在于前缀。问题是 Bootstrap 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 )、嵌套 flex 容器或其他定义图像高度的方法。