在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]

Posted 2023-03-05

【中文标题】在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]

【英文标题】：Flexbox and Position Absolute Without Top/Bottom in Chome vs. FF & IE [duplicate]

【发布时间】：2017-02-07 04:54:09

【问题描述】：

我发现 Chrome 和 Firefox/Safari 在 flexbox 实现方面存在差异。当您有一个没有设置 top/bottom/left/right 的绝对位置元素时，在 Chrome 中该元素将对齐到 top: 0, left: 0，而在其他浏览器中，top 和 left 值与元素相同是静态定位的。

Take a look at the codepen here.

对于这种情况，flexbox 规范的建议是什么？哪些浏览器或哪些浏览器出现错误行为？

html

<div class="flex">
  <div class="offset">Offset</div>
  <div class="absolute">Absolute</div>
</div>

CSS

.flex 
  display: flex;
  flex-direction: column;
  width: 300px;
  background: #eee;
  height: 200px;
  padding: 8px;

.offset 
  width: 300px;
  height: 96px;
  background: #ccc;
  margin-bottom: 8px;

.absolute 
  position: absolute;
  background: red;
  color: white;
  width: 300px;
  height: 96px;

【问题讨论】：

查看了规范，W3C 清楚地概述了预期的行为。

这不是重复的，justify-content: space-between;根本不涉及。

@TylerY86，阅读它的内容：这个问题在这里已经有了答案：这不是关于问题，而是关于答案。

我阅读了答案。我看不出justify-content: space-between 和这个有什么关系，或者position: absolute 和另一个有什么关系。

您的回答没有说​​明 W3C 规范。嗯，随便。

【参考方案1】：

是的，这是 Blink 和 WebKit 在布局上的区别。

我认为当前的建议是指定top 和left，或者使用具有更好行为的东西。

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.绝对定位的子元素不应参与弹性盒布局模型。它们应被视为元素中的起始项。

编辑：他们可能需要更新他们的test cases - 他们需要将 Blink 和 WebKit 分开，并且他们需要这个特殊的重叠测试。