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 ，正如一些Google結果表明的那樣，但這沒有幫助。

Answer 1

更新

添加align-items: flex-start到loading-spinner-container解決該問題，這是有道理的，因為align-items默認是可stretch並且可以在flex列方向上跨軸（在這種情況下為水平）工作。

更新，第二修訂版

此外，要解決垂直居中問題，並且由於IE11的min-height再次出現問題，請從loading-spinner-background移除flex-direction: column ，然后將min-height: 100px移至loading-spinner-container 。

堆棧片段

 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結合使用，則可以在img上img margin: auto 。

小提琴演示

---

根據評論更新了第三版

較長的文字似乎無法在IE上自動換行。

正如所示這個帖子 ，IE需要有寬度設定明確的柔性項目，這里p ，由於還loading-spinner-container是柔性的列項（ 行項目flex-grow就足夠了），它需要一個太（或overflow: hidden ）。

小提琴演示

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。

希望能幫助到你。