Internet Explorer - Flexbox图像比率

Question

以下小提琴在Chrome/Firefox中正确显示图像比率.

但是,在Internet Explorer中,图像(应该是正方形)在调整大小以适合其容器时,会在flexbox布局中保留其原始高度.

http://jsfiddle.net/minlare/knyagjk5/

<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;
}

如何预防/修复这个问题？

Answer 1

其原因是一个已知的文档错误 ,其中IE10和IE11并不总是保留内在比率.根据@ gaynorvader的评论,它在IE10中工作的原因是IE10中'flex'的默认值是0 0 auto最终规格的默认值0 1 auto.这意味着在IE10中,您的图像被视为flex-grow: 0在flexbug 6中进一步解释

这里的修复是按照以下方式设置您的图像flex: none;:http://jsfiddle.net/hexalys/knyagjk5/12/,或者在它周围添加一个额外的容器.但是如果你真的不需要的话,我建议不要让图像弹性项目.在这种情况下,你的article容器已经是一个flex-item,所以我认为你不需要在类中创建另一个嵌套的flex项.details.这似乎没必要.

Answer 2

添加一点CSS:

img {
  min-height: 1px;
}

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

老实说,我希望我知道为什么这样做.根据hexalys的回答,我认为这迫使IE重新计算高度/宽度比.(无论如何,我现在将它应用于我自己的代码,其中受影响的元素是标签而不是图像;它也在那里工作.)