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 に答える