Question

我在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/

Answer 1

就像我在评论中所说的那样，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/

Answer 2

你不需要绝对位置来居中你的内容，使用margin 0 auto来进行figcaption。

.banner figcaption{ margin: 0 auto; ...}

删除位置abloute。

修改如果你想把图像作为背景：

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;} .banner img{position: absolute} .banner figcaption{margin: 0 auto; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; }

编辑3：

如果你想使用图像的高度，不要改变任何东西，只需添加左：5％：

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

Flexbox - Firefox不以绝对元素为中心

2 个答案: