4

次の 3 つの URL を比較してください (それぞれの場合の上部のナビゲーション バーを見てください)。

  1. http://fast.kirkdesigns.co.uk/blog
  2. 上記と同じですが、URL フラグメント #navigation を使用
  3. 上記と同じですが、URL フラグメント #node-2655 を使用

唯一の違いは、末尾の URL フラグメントであることに注意してください。

最初の 2 ページはまったく問題なく表示されます (少なくとも Firefox では)。問題があるのは3つ目です。フラグメント #node-2655 は、上部のナビゲーション バーを画面の上部から押し出します。ページの上部までスクロールすると、ナビゲーション バーが半分にカットされています。これは、ページが最初にロードされたときにナビゲーションバーが最初のビューポートの外に出る原因となる URL フラグメントを使用した場合に発生します。

では、url フラグメントを使用すると、このような css レイアウトにどのように影響するのでしょうか?!

解決策: 以下で提案されているように、navbar を保持していたコンテナー要素のオーバーフロー: hidden を削除すると、問題が修正されました。でも、その理由を理解したいです！

4

8 に答える 8

8

css_75afd7072eaf4096aaebf60674218e31.cssのoverflow:hiddenonを削除します#main

于 2009-08-01T11:03:40.187 に答える
2

私もこの問題を抱えており、何が起こっているのかを見ることができると思います。

大規模な (5678 ピクセル) マージンとパディングを備えた「列」ブロックにより、そのブロックは非常に高くなります。Firefox 以外のブラウザーでは、正の値と負の値が互いに相殺されますが、FF は実際にそのように高くなります。

FF は、2 つが互いに打ち消し合うことも知っていますが、5678px のパディングを見て、列ブロックが #wrapper ブロックの下部から突き出ていると判断したようです。これはオーバーフローです。オーバーフローを #wrapper で auto に設定すると、#wrapper の実際のサイズがスクロール バーの下に表示されます。

オーバーフローを非表示に設定すると、FF はスクロールバーを取り除きますが、それでも #wrapper のコンテンツをスクロールしているように見えるため、フラグメントが指す項目がページの上部に表示されます。これは、スクロール可能なブロック内のフラグメント リンクの通常の動作ですが、スクロールバーがないため、コンテンツを再び下にスクロールすることはできず、レイアウトがフラグメントによって影響を受けているように見えます。

つまり、この例では、FF が目に見えないスクロールバーを操作していると思われます。これはバグと見なされる可能性がありますが、おそらく正しい動作です。URL フラグメントを使用して、オーバーフローしていない固定サイズのブロック内でコンテンツを上下にスクロールできることは、JavaScript がなくても機能する画像 "スライダー" を実装するために効果的に使用できる手法です。

それが役立つことを願っています。これは何年も私を困惑させてきましたが、この説明は突然私を驚かせました. これに対する私の現在の回避策は、jQuery "scroll to" プラグインを使用してページ全体をフラグメントまでスクロールすることです。

#wrapper から「display: hidden」を削除することもできますが、ページの長さは 0.5 マイルになります。

于 2010-11-02T15:04:00.753 に答える
2

Opera では問題ないので、FireFox ではレンダリングのバグだと思います。とにかく、あなたが言うようにアンカーがCSSを変更するべきではありません（jQueryなどを使用していない限り）。

于 2009-08-01T10:16:34.960 に答える
1

その理由は、大きなパディングのある列がコンテナーを拡張したためですが、拡張は非表示になりますが、overflow：hidden; しかし、フラグメントを使用すると、フラグメントの位置にスクロールされ、それより上のものを効果的に切り刻みます。javascriptを使用してscrollTopを0に設定すると、通常の位置にスクロールして戻ります。

基本的に、ブラウザがうまく処理できないように見える奇妙なエッジケース。

于 2011-02-05T11:44:26.717 に答える
1

head でリンクされている 30 以上のスタイルシートからの奇妙な継承がある可能性があることを指摘しておきます。:targetどちらも存在しない可能性があり、おそらくダンが示唆したレンダリングのバグ (おそらくスタイリングに関連する) です。スタイルシートが 30 を超えると、他に何が起こってもおかしくなり始める可能性が高いことを指摘しておく価値があると感じました。

于 2009-08-01T10:22:06.073 に答える
0

申し訳ありませんが、これは「回答」ではなく、他のコメントへの回答です。この問題は驚くばかりです。分離するのは非常に簡単で (つまり、スタイルシートの数とは関係ありません)、目的のレンダリングを実現する方法がないため、適切な「解決策」がありません。

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>
于 2010-06-04T14:17:35.043 に答える
0

オーバーフローの非表示要素がスクロールされた位置まで本文をスクロールするJavaScriptでこれを解決できました。

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)
于 2019-05-18T04:42:40.313 に答える
0

補足として、上記の手法は一般に、幅が柔軟な複数列のレイアウトを提供するために使用されます。固定幅のレイアウトがより多くのコメントになっているので、これはおそらく最近ではあまり重要ではなくなりつつあります.ブラウザはウェブページを拡大して小さなテキストを見ることができます.たとえば、幅 (ems 単位) を設定して、ユーザーが選択したフォント サイズと倍率に関係なく、1 行あたり理想的な 9 語を表示します。

それが答えのように聞こえない場合は申し訳ありませんが、基本的には、この古いモデルを破棄し、固定幅の列への移行を検討することを提案しています (これはまったく新しいテーマです)。

于 2010-11-02T15:11:12.527 に答える