Internet Explorer - Flexbox 图像比例

Posted 2023-03-05

【中文标题】Internet Explorer - Flexbox 图像比例

【英文标题】：Internet Explorer - Flexbox Image Ratio

【发布时间】：2016-01-09 19:49:25

【问题描述】：

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

但是在 Internet Explorer 中，图像（应该是方形的）在调整大小以适合其容器时在弹性盒布局中保留其原始高度。

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

<section>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" />
        <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" />
        <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;

如何防止/解决这种情况？

【问题讨论】：

我认为这是 IE11 中的一个已知错误（您的代码在 IE10 中运行良好）。也许需要一个js解决方案？

@gaynorvader 谢谢，甚至没有考虑过旧版本的 IE 可以工作。我已经按照您的建议使用了 js 解决方案。如果你想回答，我会接受。

不，打开它以防有人修复，如果您愿意，可以使用元标记强制 IE10 模式。这与其说是一种解决方法，不如说是一种解决方法。 <meta http-equiv=“X-UA-Compatible” content=“IE=10”>

【参考方案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/，或在其周围添加一个额外的容器。但如果你真的不需要的话，我建议不要让图像成为弹性项目。在这种情况下，您的 article 容器已经是一个弹性项目，所以我认为您不需要从 .details 类中创建另一个嵌套弹性项目。这似乎没有必要。

【讨论】：

如果您的标记是文章 > 链接 > 图像 div / 内容 div / 页脚 div，可以做什么。对于每篇文章底部的页脚，链接容器还需要应用 flexbox，其内容的 flex 为 1。这种特殊结构在 IE 上根本不起作用，因为图像只是呈现全高。

【参考方案2】：

添加一点 CSS：

img 
  min-height: 1px;

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

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