绝对定位干扰 Firefox 中的 flexbox 定位 [英] Absolute positioning interfering with flexbox positioning in Firefox

问题描述

我有一个关于 flexbox 的复杂问题.基本上，我的演示适用于 Chrome，但不适用于 Firefox.下面是我的 HTML 代码:

<img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt=""><img src="http://www.buntycars.com/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt=""><图><img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt=""><figcaption>说明性标题</figcaption></图><图><img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt=""><figcaption>说明性标题</figcaption></图>

现在文档中有以下关于 flex 容器中定位元素的说明:

<块引用>

因为它是流外的，一个绝对定位的 flex 子节点容器不参与弹性布局.

但 Firefox 中的错误是你在下面看到的

请注意，Firefox 中的黑色汽车图像与 Chrome 中的右上角不同.不知何故，在 Firefox 中，绝对定位的元素似乎仍然会干扰其余元素的定位，我认为这不应该是这种情况.

为什么会这样?为什么 Firefox 允许绝对定位元素干扰其他静态元素的定位?

P.S. 这是一个为什么"的问题.我不只是在寻找黑客"来解决这个问题，而且我实际上对为什么会发生这种情况感兴趣.

解决方案

那是因为 旧版本的规范:

<块引用>

绝对定位的 flex 容器的孩子不是他们自己弹性项目，但它们在正常情况下会留下占位符"在框树中的位置.这些占位符是匿名内联的宽度、高度和行高为0"的框，并且它们相互作用通常使用 flexbox 布局算法.

这是后来修改的:

<块引用>

静态位置旨在或多或少地匹配一个匿名的 0×0 流入flex-start"对齐的弹性项目，它参与 flex 布局，主要区别在于任何由于justify-content:space-around"或justify-content: space-between"被抑制在假设项

但 Firefox 并未实施该更改.

I have a bit of a complex question on flexbox. Basically, my demo works in Chrome but not in Firefox. Below is my HTML code:

<div class="flex-main-container">

    <img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt="">
    <img src="http://www.buntycars.com/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt="">

    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>
    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>

</div>

Now the documentation has the following to say about positioned elements in flex containers:

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

MORE INFO HERE

Now I have positioned two elements, i.e., the images absolutely like so:

.flex-main-container > img:nth-of-type(1) {
        position: absolute;
        left: 0;
        top: 0;
}

.flex-main-container > img:nth-of-type(2) {
        position: absolute;
        left: 100px;
        top: 150px;
} 

Now on the container I have the following code:

.flex-main-container {
        background: #eee;
        display: flex;
        height: 500px;
        align-items:flex-start;
        justify-content:space-between;
        flex-direction: column;
} 

Now I would expect the remaining elements to spread out vertically since I have justify-content:space-between on the main container. I do get the desired behavior in Chrome. See screenshot below:

BUT THE BUG IN FIREFOX IS WHAT YOU SEE BELOW

Notice how in Firefox the black car image is not aligned to the top-right like it is in Chrome. Somehow in Firefox the absolutely positioned elements still seem to interfere in the positioning of the remaining elements, which I believe this shouldn't be the case.

Why is this happening? Why is Firefox allowing absolutely positioned elements to interfere in the positioning of other static elements?

P.S. This is a "why" question. I am not just looking for a "hack" to fix this, but I am actually interested in why is this happening.

解决方案

That's because of an old version of the spec:

Absolutely positioned children of a flex container are not themselves flex items, but they leave behind "placeholders" in their normal position in the box tree. These placeholders are anonymous inline boxes with a width, height, and line-height of ‘0’, and they interact normally with the flexbox layout algorithm.

This was later modified:

The static position is intended to more-or-less match the position of an anonymous 0×0 in-flow ‘flex-start’-aligned flex item that participates in flex layout, the primary difference being that any packing spaces due to ‘justify-content: space-around’ or ‘justify-content: space-between’ are suppressed around the hypothetical item

But Firefox didn't implement that change.

这篇关于绝对定位干扰 Firefox 中的 flexbox 定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！