html - Internet Explorer - Flexbox 图像比例

Question

以下 fiddle 在 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

这是一个 known documented bug 的原因其中 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/ ，或在其周围添加一个额外的容器。但是如果你真的不需要的话，我建议你根本不要制作 images flex 元素。在这种情况下，您的 article 容器已经是一个 flex-item，因此我认为您不需要从 .details 类中创建另一个嵌套的 flex 元素。这似乎是不必要的。