Question

我正在尝试在flexbox容器中放置一个固定的子div，但是遇到了Firefox和Chrome之间的浏览器兼容性问题。使用大众单位调整子div上的边距会导致每个浏览器中的测量结果不同。谁能告诉我哪种浏览器具有正确的解释，以及是否有任何变通办法来使两者始终显示？

我在这里工作过CodePen： https://codepen.io/japongnet/pen/YbgZww

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
  margin-left: 50vw;
  position: fixed;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

这是Firefox中的输出： firefox fixed position flexbox margin issues

在Chrome中： chrome fixed position flexbox margin issues

Answer 1

我会说firefox在这里是正确的，但是Chrome并没有违反任何规范，这也是正确的。

该问题与以下事实有关：您未设置left或right值，并且浏览器正在考虑静态位置以标识元素的位置。

来自the specification

在本节及下一节中，（元素的）“静态位置”一词大致是指元素在正常流中应具有的位置。更精确地：


静态位置包含块是假设框的包含块，如果其指定的“位置”值为“静态” 且其指定的“浮动”一直没有。（请注意，由于第9.7节中的规则，该假设计算可能还需要假设'display'的计算值不同。）

“左侧”的静态位置是从包含块的左侧边缘到假设框的左侧边缘的距离，如果其“位置”属性具有保持“静态” ，“浮动”变为“无”。如果假设框位于包含块的左侧，则该值为负。

“ right”的静态位置是从包含块的右边缘到与上述相同假设框的右边缘的距离。如果假设框位于包含块的边缘的左侧，则该值为正。

然后再来

：

“ left”和“ right”为“ auto”而“ width”不是“ auto”，则如果建立静态位置包含块的元素的“ direction”属性为“ ltr”，则设置为“ ”左”设置为静态位置，否则将“右”设置为静态位置。然后求解“ left”（如果“ direction”为“ rtl”）或“ right”（如果“ direction”为“ ltr”）。

基本上，我们没有为元素设置任何左值，因此如果将元素的左值设置为position:static

，浏览器将使用它

在设置position:fixed之前，我们具有与所有浏览器相同的以下内容：

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
  margin-left: 50vw;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

如果我们添加position:fixed，则该元素不应移动，并且应保持相同的位置（仅在Firefox中如此）：

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
  margin-left: 50vw;
  position:fixed;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

根据相同的规范，我们还可以阅读：

但是，用户代理可以随意猜测其可能的位置，而不是实际计算该假设框的尺寸。

考虑到这一点，我们不能说chrome做错了。 Chrome浏览器正在考虑未指定margin-left的元素的静态位置，如下所示：

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

然后添加position:fixed：

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
  position:fixed;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

然后添加左边距：

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
  margin-left: 50vw;
  position:fixed;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

要确保您具有相同的行为，您需要指定left或right：

.parent {
  background-color: #333333;
  border: 1px solid black;
  color: white;
  width: 90vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.child {
  background-color: #aaabbb;
  width: 200px;
  height: 200px;
  left: 50vw;
  position:fixed;
}

<div class="parent">
  <div class="child">
    Child
  </div>
</div>

Answer 2

您可以尝试将相对位置更改为父级，将绝对位置更改为子级。并使用左：50vw

固定位置弹性盒和大众单元的跨浏览器问题

2 个答案: