Chrome 中的 CSS "position: fixed;"布局不一致

Question

请耐心等待，因为这需要一些解释......

历史:为了创建一个固定宽度的 2 列布局，右列固定在窗口顶部，我使用以下通用方法(这是概念代码，不是真实的)。

HTML

<div class="wrap">
  <div class="left"></div><div class="right"></div>
</div>

CSS

.wrap { width: 1000px; }
.left { width: 700px; display: inline-block; }
.right {
  width: 300px;
  display: inline-block;
  position: fixed;
  top: 0;
  right: auto; }

问题:我有一个使用这种方法的网站，其中右容器间歇性地呈现在左容器的顶部，而不是像预期的那样呈现在它的右侧。这只发生在 Chrome 中，您可能需要刷新页面几次才能看到问题。

Here's a link to the site

要点:我知道该页面上发生了成百上千的事情，而且“正确的:自动；”规则取决于元素静态放置的位置。但是，如果您在开发工具(DOM 中的#sidebar)中检查正确的容器并将其 CSS 位置从固定更改为静态，它会跳转到预期的布局位置。然后，如果您将其改回 fixed，它会保留在那里。这对我来说似乎很奇怪(有问题)。

底线:在我看来，最初绘制页面时，Chrome 有时会错误地计算布局。我不太了解浏览器在绘制页面时处理计算的顺序，并且对为什么会发生这种情况或者如何开始调试这个问题感到困惑。我希望特殊情况能给对这些事情了解更多的人一些线索，让他们知道我可以从哪里开始寻找。

Answer 1

我不确定为什么会出现您最初的错误，但正如我所看到的，您为 #inner-wrap 设置了固定宽度，所以去掉 display:inline-block在 #sidebar 而不是 padding-left:75px 上做 margin-left:630px。这在所有浏览器中看起来应该完全相同。

这是一个fiddle