2

当使用滚动条“自动显示”-功能与“始终可见”（参见 OSX 设置->常规）时，我们注意到 OSX 下的所有浏览器都有一个奇怪的行为。

如果切换到“始终”，则 100% 的固定/绝对元素的宽度比切换到“自动”时小 15px。

我基本上可以理解“总是”滚动条使用固定空间，而“自动”滚动条是某种覆盖在内容上的。

但到底为什么这对

position:fixed/absolute

元素，但不是

position:static/relative?

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

期望的最终结果：无论滚动条上的客户端设置如何，蓝色 (#navigation) 和红色 (#main) DIV 都应该完美对齐。

4

1 回答 1

1

位置固定/绝对的元素通常从正常的文档流中取出。对于幕后发生的事情，这里有一个很好的答案。

至于您的代码，请查看此更新的 jsfiddle，在打开和关闭 OSX 选项时对我有用

https://jsfiddle.net/n4jtpwvw/1/

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

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

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

于 2016-06-16T20:54:31.267 回答