Question

我发现Chrome和Firefox / Safari之间的flexbox实现存在差异。当你有一个没有顶部/底部/左/右设置的位置绝对元素时，在Chrome中元素会捕捉到顶部：0，左边：0，而在其他浏览器中，顶部和左边的值与元素相同是静态的。

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;
}

Answer 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分开，他们需要进行这种特殊的重叠测试。

在Chome的Flexbox和位置绝对没有顶部/底部与FF＆amp; IE

1 个答案: