IE CSS BUG：IMG原來的高度影響家長的高度

我有一個父Flexbox的DIV（這也是列Flexbox的部分）：IE CSS BUG：IMG原來的高度影響家長的高度

div.flex_block { 
     width:100%; 
     flex: 1 1 auto; 
     display:flex; 
     flex-direction:row; 
     align-items:center; 
     justify-content:space-between; 
     padding-bottom:30px; 
}

它包含了2個孩子：

.flex_block .content{ 
    max-width:none; /* override other code */ 
    flex: 0 1 50%; 
} 

.flex_block .image{ 
    max-width:none; /* override other code */ 
    flex: 0 1 35%; 
}

第一個孩子有一些文字。第二個尺寸超大的圖像設置爲100％寬度，因此縮小至其容器。

.flex_block .image img{ 
    display:block; 
    width:100%; 
    height: auto; 
}

它將按預期在Chrome，但在IE原IMG的高度似乎展開父容器（即使它不收縮，以適應其容器）。如果我設置了img高度，問題就解決了。 AUTO不修復它。我需要這個作爲響應式設計，顯然，所以我不希望以像素爲單位設置高度。

這裏是發生了什麼可視化：

我一直在使用與百分比寬度，而不是Flexbox的內聯元素也嘗試過，但問題佔了上風。

來源

2015-10-26 toms

你有沒有想出一個解決方案呢？我現在有類似的問題，這使我瘋了。微軟似乎已經解決了IE12和IE13，但11是一個問題。 – JonMcL

一個可能解決方案添加到容器：

flex-shrink: 0;

或者更具體的IE11：

-ms-flex-negative: 0;

這似乎已經解決了我的問題，但結果可能會不同。

我不假裝明白爲什麼它的工作，但它似乎是爲我工作。 :)

來源

2016-04-27 20:27:02 JonMcL

IE CSS BUG：IMG原來的高度影響家長的高度

回答

相關問題