Question

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

我之前使用过Flexbox仅仅使用autoprefixer成功使用了Flexbox，但出于某些原因，我在IE11中如何解决这个问题。

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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），嵌套弹性容器或其他一些定义图像高度的方法。

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

1 个答案: