在IE11中溢出容器的Flex項目

Question

我的flex容器有一個水平列表項目，除了IE11之外，所有瀏覽器都能正確顯示其父項內容，這似乎不能將它們保留在其中，而是像它們「流血」一樣：

下面是我設置的簡化Fiddle其實際行動體現了這個問題：

ul, li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    width: 200px; 
 
    border: 1px dashed red; 
 
} 
 

 
li img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<ul> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
</ul>

結果在Chrome：

結果在IE11：

什麼解決辦法？

Answer 1

它看起來像IE11需要你定義一個大小柔性物品（li）：

ul, li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    width: 200px; 
 
    border: 1px dashed red; 
 
} 
 
    
 
li {    /* NEW */ 
 
    flex: 0 1 100%; /* flex-grow, flex-shrink, flex-basis */ 
 
    /* flex: 1 */ /* alternatively, this also works (short for: fg:1, fs:1, fb:0px) */ 
 
} 
 

 
li img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<ul> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
</ul>

revised fiddle

Answer 2

我不知道，是正確的方法與否，但你可以嘗試這個黑客，它的作品

你也可以嘗試t他用modernizr目標IE瀏覽器

ul, 
 
li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    width: 200px; 
 
    border: 1px dashed red; 
 
} 
 

 
_:-ms-fullscreen .ie-hack li, 
 
:root .ie-hack li { 
 
    display: flex; 
 
} 
 

 
li img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<ul class="ie-hack"> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> 
 
</ul>

Answer 3

正如已經提到，IE11希望Flex子項的寬度設置。您的標記顯示您正嘗試在圖像上設置高度和寬度。您可以取消圖片中的高度和寬度屬性，然後將圖片設置爲width: 100%。這將允許每個圖像佔用其父母的空間，並且仍然根據容器中的人數進行縮放。

或者，如果你不想這些圖像來獲得更大的，你可以在li

ul, li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    width: 200px; 
 
    border: 1px dashed red; 
 
} 
 
    
 
li {    
 

 
\t flex-grow: 1; 
 
\t flex-shrink: 1; 
 
/* max-width: 50px; for keeping image from ever getting larger than certain point */ 
 
} 
 

 
li img { 
 
    width: 100%; 
 
}

<ul> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> 
 
    <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> 
 
</ul>

設置 max-width