Question

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

但是在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;
}

如何预防/修复？

Answer 1

原因是known documented bug，其中IE10和IE11不始终保持固有比率。根据@ gaynorvader的评论它在IE10中工作的原因是IE10中'flex'的默认值是0 0 auto，而不是最终规范的0 1 auto。这意味着在IE10中，您的图片被视为flex-grow: 0，在flexbug 6进一步说明

此处的修复方法是根据http://jsfiddle.net/hexalys/knyagjk5/12/将图片设置为flex: none;，或在其周围添加其他容器。但是如果你真的不需要的话，我建议不要让图像弹性项目。在这种情况下，您的article容器已经是一个flex项，所以我认为您不需要在.details类之外创建另一个嵌套的flex项。这似乎没必要。

Answer 2

添加一点CSS：

img {
  min-height: 1px;
}

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

老实说，我希望我知道为什么会这样。鉴于hexalys' answer，我认为这迫使IE重新计算高度/宽度比。（无论如何，我现在将它应用于我自己的代码，其中受影响的元素是标签而不是图像;它也在那里工作。）

Internet Explorer - Flexbox图像比率

2 个答案: