flexbox 中 IE11 中的图像大小不正确

Question

我正在尝试将图像定位在 div 中。它应该居中。 div 应该有一个最小宽度，并且只有在图像下方的文本需要它时才应该增长。

以下代码演示了我在 Chrome 中想要的内容：

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: aliceblue;
}

.loading-spinner-overlay-1 {
    left: 0;
    top: 0;
    right: 0;
    bottom: calc(100% - 300px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-overlay-2 {
    left: 0;
    top: 300px;
    right: 0;
    bottom: calc(100% - 600px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-background {
    min-width: 100px;
    min-height: 100px;
    max-width: 50%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 20px;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.loading-spinner-container > img {
    margin: auto;
}

.loading-spinner-container > p {
    text-align: center;
    margin: 0;
}

<img src="http://placehold.it/40x40">
<div class="loading-spinner-overlay-1">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
    </div>
  </div>
</div>

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
      <p>
      Some long text
      </p>
    </div>
  </div>
</div>

但是，在 IE11 中，它看起来像这样：

我做错了吗？或者这是 IE11 中的错误？

我能做些什么来解决这个问题？

我尝试按照一些谷歌结果的建议在img 标签上设置max-width: 100% 和flex-shrink:0，但这没有帮助。

Answer 1

更新

将align-items: flex-start 添加到loading-spinner-container 解决了这个问题，这是有道理的，因为align-items 默认为stretch，并且可以跨轴（在本例中为水平）用于弹性列方向。

更新，第二次修订

此外，为了解决垂直居中问题，由于 IE11 在 min-height 方面再次出现一些问题，请从 loading-spinner-background 中删除 flex-direction: column 并将 min-height: 100px 移动到 loading-spinner-container。

堆栈sn-p

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: aliceblue;
}

.loading-spinner-overlay-1 {
    left: 0;
    top: 0;
    right: 0;
    bottom: calc(100% - 300px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-overlay-2 {
    left: 0;
    top: 300px;
    right: 0;
    bottom: calc(100% - 600px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-background {
    min-width: 100px;
    max-width: 50%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    /* flex-direction: column;                  removed  */
    z-index: 1;
    padding: 20px;
}

.loading-spinner-container {
    min-height: 60px;                       /*  added/value changed (moved from *-background class)  */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;                /*  added  */
}

.loading-spinner-container > img {
    margin: auto;
}

.loading-spinner-container > p {
    text-align: center;
    margin: 0;
}

<img src="http://placehold.it/40x40">
<div class="loading-spinner-overlay-1">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
    </div>
  </div>
</div>

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
      <p>
      Some long text
      </p>
    </div>
  </div>
</div>

---

还可以使用align-items: center，如果与justify-content: center结合使用，可以将margin: auto放在img上。

Fiddle demo

---

更新，第三次修订，基于评论

较长的文本似乎无法在 IE 上换行。

如this post 所示，IE 需要在 flex 项目上显式设置宽度，这里是 p，因为 loading-spinner-container 也是一个 flex column 项目（对于 row item flex-grow 就足够了），它也需要一个（或overflow: hidden）。

Fiddle demo

Answer 2

试试这个：

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <div class="img-container">  <!-- added this -->
        <img src="http://placehold.it/40x40">
        <p>
            Some long textwrwerwer
        </p>
      </div>
    </div>
  </div>
</div>

然后添加新类：

.loading-spinner-container .img-container {
  clear:both;
  text-align:center;
}

基本上我添加了一个包装 div。

希望对你有帮助。