Question

我们注意到OSX下所有浏览器都有一种奇怪的行为。当使用滚动条＆＃34;自动显示＆＃34; -feature vs.＆＃34;始终可见＆＃34; （参见OSX设置 - >一般）。

如果它切换到＆＃34;总是＆＃34;，100％的固定/绝对元素的宽度比切换到＆＃34;自动＆＃34;的宽度少15px。

我基本上可以理解＆＃34;总是＆＃34;滚动条使用固定空间而不是＆＃34;自动＆＃34;滚动条是某种覆盖在内容上的。

但为什么这件事对此非常重要

position:fixed/absolute

元素，但不是

position:static/relative?

我做了一个小提示来演示这个问题，但是，您必须切换系统设置才能注意到它： https://jsfiddle.net/n4jtpwvw/

所需的最终结果：无论滚动条上的客户端设置如何，蓝色（#navigation）和红色（#main）DIV都应完美对齐。

Answer 1

位置固定/绝对的元素通常取自正常的文档流程。对幕后发生的事情有一个很好的答案here。

至于你的代码，看看这个更新的jsfiddle，在我打开和关闭OSX选项时适合我

.w1 {
  ...
  max-width: 300px;
  margin: 0 auto;
}

#navigationWrapper {
  ...
  max-width: inherit;
}

我在.w1和自动边距上设置了最大宽度。然后我从#navigationWrapper中取出左右属性，让它从.w1继承最大宽度