CSS Flexbox bug with Firefox



我在Firefox(最新版本)上使用Flexbox时遇到了一些奇怪的行为。

这似乎发生在一个非常特殊的情况下,当弹性项目的子元素中有一个绝对定位的元素时

我已经创建了一个代码笔演示,它在Chrome中运行良好,但在Firefox上,你会看到图像消失了。

演示是最简单的形式。所以应该非常直接地知道我要做什么(提示:chrome)

http://codepen.io/anon/pen/QwBaLJ

您将看到.Item-media元素设置为position: relative;,其中有一个img,设置为position: absolute;

有没有人在firefox上经历过这种情况,并设法找到了一个不错的解决方案?

重要这是一个响应式演示,只是移动版本在firefox中不起作用。

尝试在"…"前面加前缀-flex css

-moz-box-flex: $values

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

最新更新