Question

我有一个＆＃34; row＆＃34;包含5个flex＆＃34; cell＆＃34;包含一个应该在中间对齐的图像。

它在Chrome和Firefox中完美运行，但它在IE中并不适用。它没有获得良好的比例。换句话说，当图像位于弹性框中时，height:auto在IE中不起作用。

我已经为图片尝试了一些类似flex:none;的内容，或者将图像包装在另一个div中。什么都行不通。

我希望它具有良好的比例并完全集中：

这是一个jsFiddle：https://jsfiddle.net/z8op323f/5/

＆＃13;

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
}
img {
  width: 60%;
  margin: auto;
  height: auto !important;
  min-height: 1px;
}
.long {
  width: 80%;
  height: auto !important;
}

＆＃13;

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

＆＃13;

Answer 1

height: auto仅表示内容的高度。它是一个默认值;你不需要指定它。

如果您从代码中删除height: auto，则不会更改任何内容（在任何浏览器中）。

来自规范：10.5 Content height: the height property

问题似乎是在Chrome和FF中尊重margin: auto。但它在IE 11 / Edge中被（大部分）忽略了。

这可能是一个错误。已知IE11具有许多 flexbugs ：

https://github.com/philipwalton/flexbugs
http://caniuse.com/#search=flexbox（参见＆＃34;已知问题＆＃34;标签）

一个简单的跨浏览器解决方案是使用margin: auto等价物：

而不是Flex项目上的此代码：

img {
    margin: auto;
}

在弹性容器上使用它：

.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

有关详细信息，请参阅此处的方框＃56：https://stackoverflow.com/a/33856609/3597276

Revised Fiddle

＆＃13;

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
  justify-content: center;    /* NEW */
  align-items: center;        /* NEW */
}
img {
  width: 60%;
  /* margin: auto; */
  /* height: auto !important; */
  min-height: 1px;
}
.long {
  width: 80%;
  /* height: auto !important; */
}

＆＃13;

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

＆＃13;

Answer 2

尝试为IE 10添加display: -ms-flexbox;

flexbox中的图像高度在IE中不起作用

2 个答案: