Question

请参阅小提琴：http://jsfiddle.net/4E2bV/793/

.imageContainer {
    position: relative;
    width: 23%;
    padding-bottom: 23%;
    float: left;
    height: 0;
    margin: 1%;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}
body{
    display: flex;
}

在FF上，正文中的项目填充等于0 - 在其他浏览器上，底部填充正确为23％

在FF中使用百分比值是否有解决方法？在Chrome和IE上，它可以正常工作。

Answer 1

你的小提琴根本不适用于我的FF。我需要将其更改为webkit-flex，如下所示：

body{
   display: -webkit-flex;
}

然后它与Chrome完全一样，填充没问题我的FF版本：28.0
我的Chrome版本：37.0.2062.120 m

Answer 2

是的，对不起，我误解了。尽量不要使用body作为flex-container。在其中使用div代替所有图像。我还将.imageContainer和.img的css更改为我认为看起来不错的东西。顺便说一句可爱的小猫： - ）

这是代码（适用于Chrome和FF）：

<style>
    .imageContainer{
        /*flex-grow:1;*/
        width:10%;        /*<--- use this to change the image's width */
        margin:1%;
    }
    .cats{
        display: flex;
    }
    img {
        max-height: 100%;
        max-width: 100%;
    }
</style>

<html>
<body>
<div class="cats">
    <div class="imageContainer">
        <img src="http://placekitten.com/300/300" />
    </div>
    <div class="imageContainer">
        <img src="http://placekitten.com/301/301" />
    </div>
    <div class="imageContainer">
        <img src="http://placekitten.com/302/303" />
    </div>
    <div class="imageContainer">
        <img src="http://placekitten.com/303/303" />
    </div>
</div>
</body>
</html>

为什么设置百分比填充（和高度）不适用于FF中的flexbox内的元素

2 个答案: