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

Posted 2023-03-05

【中文标题】flexbox中的图像高度在IE中不起作用

【英文标题】：Image height in flexbox not working in IE

【发布时间】：2016-11-20 18:39:34

【问题描述】：

我有一个 flex“行”，其中包含 5 个 flex“单元格”，其中包含一个应该在中间对齐的图像。

它在 Chrome 和 Firefox 中完美运行，但在 IE 中却不行。它没有得到好的比例。换句话说，height:auto 在 IE 中当图像在 flexbox 中时不起作用。

我已经尝试了几种方法，例如 flex:none; 用于图像或将图像包装在另一个 div 中。没有任何效果。

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

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

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

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

【参考方案1】：

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

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

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

---

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

这可能是一个错误。特别是 IE11 有很多 flexbugs：

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

---

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

在弹性项目上代替这段代码：

img 
    margin: auto;

在弹性容器上使用它：

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

有关更多详细信息，请参见此处的框 #56：https://***.com/a/33856609/3597276

Revised Fiddle

.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; */

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

【参考方案2】：

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

【讨论】：

你在哪里写了display: flex;看看这个css-tricks.com/using-flexbox它可能会有所帮助

阅读问题.. 这是浏览器兼容性问题，显示 flex 被 ie 识别，这不是问题。请在回答之前尝试解决 jsfiddle。不过谢谢！