css - Firefox 错误或错误的 flex 样式？

Question

我真的不知道从哪里开始解决这个问题。

我有一个带有嵌套 flexbox 的应用，每个 flexbox 都包含一个已旋转 270 度的范围。

它适用于 chrome，但在 firefox 上，它最初加载如下:

如您所见，禁用的输入类型=标记为 PPV(+) 和 NPV(-) 的数字被奇怪地向下推。但是，如果我检查元素、调整窗口大小或其他看似随机的触发器，它会快速恢复到正确的位置，看起来与 chrome 相同:

演示 chrome 与 firefox 差异的笔可以在以下位置看到: CodePen 有趣的是，删除这两种样式中的任何一种都会消除浏览器之间的不同呈现(两种浏览器都可以正确显示)。

.inputDiv input[type=number] {font-size 1.3rem}

和

.inputDiv > .fuzzyDiv {margin-top: 15px}

有人知道这里发生了什么吗？

Answer 1

您的代码中发生了很多事情。现在无法剖析所有内容。

但请注意这条规则:

当您关闭 left: -126px 时，元素会卡入到位。