Javascript 为什么在FF中flexbox内的元素中设置填充百分比（和高度）不起作用
看小提琴： 在FF中，主体内的项目的填充值等于0-在其他浏览器中，底部填充值为23% 是否有在FF中使用百分比值的变通方法？Javascript 为什么在FF中flexbox内的元素中设置填充百分比（和高度）不起作用,javascript,flexbox,Javascript,Flexbox,看小提琴： 在FF中，主体内的项目的填充值等于0-在其他浏览器中，底部填充值为23% 是否有在FF中使用百分比值的变通方法？ 在Chrome和IE上工作正常。你的小提琴在我的FF上根本不工作。我需要将其更改为webkit flex，如下所示： body{ display: -webkit-flex; } 然后，它的工作原理与Chrome完全相同，填充没有问题。 我的FF版本：28.0 我的Chrome版本：37.0.2062.120米是的，很抱歉我误解了。 尽量不要将body用作flex
在Chrome和IE上工作正常。你的小提琴在我的FF上根本不工作。我需要将其更改为webkit flex，如下所示：
body{
display: -webkit-flex;
}
我的FF版本：28.0
我的Chrome版本：37.0.2062.120米是的，很抱歉我误解了。 尽量不要将body用作flex容器。在其内部使用div，包围所有图像。我还对.imageContainer和.img的css做了一些修改，使之看起来很不错。对了，可爱的小猫：-） 以下是代码（适用于Chrome和FF）：
.imageContainer{
/*柔性生长：1*/
宽度：10%；/*正如我所写的-问题是它在FF中不起作用-但在Chrome中起作用。如果将其更改为-webkit flex，它将仅由Chrome识别，而不是由FF识别-结果是display:block（默认）在FF上。但我需要在FF上使用flexbox。我知道，您的解决方案只需在基于webkit的浏览器上启用flexbox。这只会关闭flexbox。我是stackoverflow新手，在编辑我自己的答案时不知道同行评议是什么……所以我给出了第二个答案。我的问题是“是否有办法在FF中使用百分比值？”如果我在您的示例中以百分比指定.imageContainer高度（或填充），则它将不起作用-在我的示例中它起作用（但在FF上不起作用）。对不起，我不知道。但是，如果在我给出的解决方案中，在imageContainer中将宽度更改为10%（占整行的百分比，而不是图像），您将获得相同的效果。图像将重新调整大小。添加向imageContainer添加“justify content:flex start”，并在左侧收集所有图像；"这可能是因为flex box用于定位，然后在其中尝试设置新的定位。您可以通过使用display:flex或类似内容将每个img包围一个div来进行实验。是-宽度有效-但高度不起作用：/：-）否…但更改宽度也会影响高度。并保持图像比率这样做的时候！我认为这很好。否则你会挤压毛孔猫（图片）。这个解决方案对你不起作用吗？
body{
display: -webkit-flex;
}
<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>