Question

小提琴：https://jsfiddle.net/yqL9uo63/1/

源代码非常简单。如果你用 chrome 打开上面的小提琴，它看起来不错。绝对位置居中 div 的高度仅足以容纳文本。但是，在 Firefox 中，div 一直延伸到容器底部。有谁知道是什么导致了 Firefox 中的这种行为，以及我可以做些什么来保持一致性？显示器必须是柔性的。

Chrome 中的东西看起来很棒，但 Firefox 却让我难以置信，我在网上找不到任何似乎有同样问题的东西。

源代码 HTML：

<div class="zero">
   <div class="one">Test</div>
</div>

CSS：

.one {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  margin: auto
}

.zero {
  height: 100vh;
  width: 100%;
  position: relative;
}

Answer 1

我注意到的

diplay: felx; 有一个错字。它必须是 flex
height: fitcontent 将无法工作，因为此 top: 0; bottom: 0;
.one 要成为 absolute 中的 .zero，.zero 必须有 position: relative;

为什么高度在具有绝对 div 的 Firefox 中表现如此不同？

1 个答案: