34

非常に奇妙な動作に遭遇しており、テストしたすべてのブラウザで一貫性がありません。

私はかなり複雑なレイアウトを持っていますが、主な問題はここにあります:

<div id="drop">
  <div id="header"></div>
</div>

#drop持っposition:absoluteてz-index:100
#headerいるposition:fixed; top:60px;

下にスクロールし始めると、Chrome はposition:fixedルールを無視します。上記の 2 つのスタイルのいずれかを削除すると、 #dropChrome はposition:fixedルールを尊重し始めます。

Ubuntu Chrome 23.0.1271.97 では動作せず、Mac Chrome 25.0.1364.99 でも同じ動作が見られます。私の友人は Ubuntu Chrome 25.0.1364.68 ベータ版を使用しており、正しく動作しています。私はFirefoxでそれをテストしましたが、ちょっとうまくいきます（他の症状があります）

誰もこのエラーについて聞いたことがありますか? または誰でもそれを再現できますか？

編集

そのレイヤーposition:fixedを削除するか、少なくとも変更するとdisplay:none、この奇妙なバグはなくなります。

編集

このバグが存在する間、ズーム レベルを前後に変更すると、位置が適切な動作に調整されることに気付きました。私には、これは、スクロール時に一部の内部コールバック関数の実行に失敗する webkit の問題を示しています。

もう1つの非常に奇妙なことは、内部にいくつかのリンクが#headerあり、divがそこに表示されなくても、予想される場所をクリックするだけで機能することです。全体的に、壊れているのはレンダリングだけであることに気付きました。ウィンドウのサイズを変更したり、ズームを変更したり、単に Select-All を実行したりして、ブラウザーに再レンダリングを強制すると、ヘッダー バーは適切な位置にジャンプしますが、固定されたままにはなりません。

4

7 に答える 7

1

header機能させるには、親コンテナーの外に配置する必要がありdropます。

数日前に少し似たような問題がありました。たとえば、の z-index を設定headerすると、親dropコンテナーの z- index に到達します。 の z-index は、header別のコンテナー内に既にあるため、役に立ちません。 z インデックス。

z-index と同じロジックが位置に適用されます。

于 2013-03-06T12:16:40.757 に答える
-6

まず第一に、div空のものは本当に奇妙な振る舞いをするので、何かを入れてください。fixedでは、 aを anに入れることで何を期待しますabsoluteか? fixed明らかに、あなたのdivの基準点が何かは誰にもわかりません。それは親の立場であるべきですか？スクロールで変化しないのはどれですか、または変化するページ位置はどれですか? 完全に意味があり、明確な定義を持つものを使用するようにしてください。クロムで修正すると、別のブラウザーではどうなるでしょうか? それらすべてでテストすることを本当に好みますか?

あなたdivの s に小さな変更を加えて、div を div から引き出すfixedか、div を別の場所absoluteに移動すると思いabsoluteます。

于 2013-03-01T08:28:45.717 に答える