Internet Explorer - Flexbox圖像比例

以下小提琴在Chrome/Firefox中正確顯示圖像比例。Internet Explorer - Flexbox圖像比例

然而，在Internet Explorer中的圖像（它應該是正方形）保持在Flexbox的佈局其原始高度被調整大小以適應他們的容器中時。

<section> 
<article> 
    <div class="details"> 
     <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/> 
     <h4>Name</h4> 
     <div class="description"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis.</p> 
     </div> 
    </div> 
</article> 
<article> 
    <div class="details"> 
     <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/> 
     <h4>Name</h4> 
     <div class="description"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis. Fusce fermentum auctor mauris, auctor lacinia mauris ornare faucibus.</p> 
     </div> 
    </div> 
</article> 
</section> 

section{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 

    -webkit-flex-wrap: wrap; 
    -moz-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
article{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 

    -webkit-box-flex: 1; 
    -webkit-flex-grow: 1; 
    -moz-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 

    -webkit-box-align: stretch; 
    -ms-flex-align: stretch; 
    -webkit-align-items: stretch; 
    -moz-align-items: stretch; 
    align-items: stretch; 

    width: 50%; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 
.details{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 

    -webkit-box-direction: normal; 
    -webkit-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -moz-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 

    width: 100%; 
    border: 1px solid #666; 
} 
.image{ 
    width: 100%; 
    max-width: 100%; 
} 
img{ 
    width: 100%; 
    max-width: 100%; 
    height: auto; 
} 
h4{ 
    padding: 10px; 
    margin-bottom: 0; 
} 
.description{ 
    -webkit-box-flex: 1; 
    -webkit-flex-grow: 1; 
    -moz-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
}

這又如何防止/固定？

來源

2015-10-12 minlare

我覺得這是在IE11一個已知的bug（代碼工作正常在IE10中）。也許需要一個JS解決方案？ – gaynorvader

@ gaynorvader謝謝，甚至沒有考慮IE的老版本將工作。按照您的建議，我已經使用了js解決方案。如果你願意，我會接受。 – minlare

Nah，如果有人有修復程序，請保持打開狀態，如果您喜歡，您可以使用元標記強制使用IE10模式。這不是一個解決方法。 '' – gaynorvader

這樣做的原因是known documented bug其中IE10和IE11沒有始終保持固有的比率。它在IE10工作按@ gaynorvader的評論的原因是，在IE10的「柔性」的缺省值是0 0 auto，而最終規範的0 1 auto。這意味着在IE10，你的形象被視爲flex-grow: 0截至flexbug 6

這裏的解決辦法是設置您的flex: none;形象，每進一步解釋說：http://jsfiddle.net/hexalys/knyagjk5/12/，或添加周圍有一個額外的容器。但是，如果你不需要，我會建議不要製作圖像彈性項目。在這種情況下，您的article容器已經是flex-item，所以我認爲您不需要從.details類中製作另一個嵌套的flex項目。這似乎沒有必要。

來源

2015-10-17 00:21:46 hexalys

如果您的標記是文章>鏈接>圖像DIV/DIV內容/頁腳DIV可以做些什麼。爲了使頁腳處於每篇文章的底部，鏈接容器還需要應用flexbox爲1的flexbox。此特定結構在IE上完全不起作用，因爲圖像只是呈現爲全高。 – MegaTron

添加CSS的一位：

img { 
    min-height: 1px; 
}

http://jsfiddle.net/mblase75/3Lb5f8pe/

老實說，我希望我知道爲什麼這個工程。根據hexalys' answer，我想這迫使IE重新計算高度/寬度比率。（在任何情況下，我申請這對我自己的代碼剛纔在受影響的元素是一個標籤，而不是一個圖像;它在那裏工作，太）

來源

2016-05-19 20:10:45 Blazemonger

Internet Explorer - Flexbox圖像比例

回答

相關問題