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

问题描述

我在flexbox上有一个复杂的问题。基本上，我的演示在Chrome中，但不是在Firefox中。下面是我的HTML代码：

 < 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.jpgalt => 
 
< figure> 
< img src =http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpgalt = > 
< figcaption>说明标题< / figcaption> 
< / figure> 
< figure> 
< img src =http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpgalt = > 
< figcaption>说明标题< / figcaption> 
< / figure> 
 
< / div> 
  

现在文档中有关于flex容器中已定位元素的说明：

因为它是流出的，flex
容器的绝对定位的孩子不参与flex布局。

但是FIREFOX中的BUG是您在下面看到的

请注意，在Firefox中，黑色汽车图像与右上角不一致，就像在Chrome中一样。不知怎的在Firefox中绝对定位的元素仍然似乎干扰剩余元素的定位，我相信应该是这样。

有人可以解释为什么是这个发生？为什么Firefox允许绝对定位的元素干扰其他静态元素的定位？

P.S 这是一个为什么问题。我不只是在寻找一个黑客来解决这个问题，但我实际感兴趣的是为什么这是发生。

谢谢。

解决方案

这是因为旧版本的规范：

容器本身不是
flex项目，但是它们在框架树中的正常
位置中留下占位符。这些占位符是带有width，height和line-height为'0'的匿名内联
框，并且它们通常使用flexbox布局算法与
交互。

这是以后修改：

静态位置旨在更多或更少匹配
的位置一个匿名的0×0流入'flex-start'对齐的flex项目
参与flex布局，主要的区别是任何
包装空间，由于'justify-content：space-around'或
'justify-content：space-between'在
假设项目附近被抑制

不能实现这种变化。

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 should't be the case.

Can somebody explain 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.

Thank you.

解决方案

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屋！