css - Flexbox - Firefox 不居中绝对元素

<分区>

我在 flexbox 中使用绝对元素。我的代码在 chrome 上运行，但 firefox 没有将我的绝对元素居中，也没有缩放我的图像。

这是我的代码

<figure class="banner">
  <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" />
  <figcaption>
    <p>TEXT</p>
    <h3>TİTLE</h3>
    <p>TEXT</p>
    <a href="#">DETAIL</a>
  </figcaption>
</figure>

CSS:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner figcaption{position:absolute; z-index:1; color:@white; text-align:center; width:90%; align-self:center; background:#f00;}

https://jsfiddle.net/nbqtn678/

最佳答案

就像我在评论中所说的那样，position: absolute 在大多数浏览器中与 flexbox 的配合并不好。

以下是一些具有相同结果的解决方案。

以图像为背景的 Flexbox 解决方案:
https://jsfiddle.net/PaulvdDool/v8L99tp4/1/

以图像作为松散元素的 Flexbox 解决方案:
https://jsfiddle.net/PaulvdDool/v8L99tp4/2/

不用flexbox也可以做到。所以这里有两个后备解决方案，供那些仍在使用 IE8 或 IE9 的人使用。

没有flexbox的背景图片解决方案:
https://jsfiddle.net/PaulvdDool/v8L99tp4/4/

没有 flexbox 的松散图像解决方案:
https://jsfiddle.net/PaulvdDool/v8L99tp4/3/

更新
我读了你对另一个答案的评论。你说你想让横幅占据图像的高度。所以这就是修复。
https://jsfiddle.net/PaulvdDool/v8L99tp4/6/

关于css - Flexbox - Firefox 不居中绝对元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42062383/