Question

我正在使用flexbox进行布局。我的约束是图像必须位于中间。

我制作了一个重现问题的最小标记：http://codepen.io/anon/pen/xwNomN

它在所有浏览器中运行良好除了IE 10和11之外，其中（如CodePen所示）在图像的顶部和底部添加了大量的空白空间。

.collection__list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item__figure {
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
}

.product-item__figure > a {
  display: flex;
    position: relative;
    flex: 1;
}

.product-item__image-wrapper {
    position: relative;
    width: 100%;
}

.product-item__image {
      display: block;
    margin: 0 auto;
  max-width: 100%;
}

我尝试了很多修复，与flex-shrink，flex-grow一起玩......但是在失去一整天后，我很想知道我做错了什么。

由于

Answer 1

哦......我偶然发现了它。将overflow: hidden添加到product-item__figure就可以了！....

嵌套的flexbox在IE10和11上添加了空白区域

1 个答案: