HTML ページに Blueprint CSS グリッドを使用しています。jQueryを使用して、表示/非表示にしたいテーブルをボタンにリンクしています。問題は、ボタンをクリックしてテーブルを表示/非表示にするたびに、ページ上のすべてがわずかに左右にずれることです。
これはよくある問題ですか?これを引き起こしている原因と、ページの他の要素が動かないように修正するために何ができるかを知っている人はいますか?
HTML ページに Blueprint CSS グリッドを使用しています。jQueryを使用して、表示/非表示にしたいテーブルをボタンにリンクしています。問題は、ボタンをクリックしてテーブルを表示/非表示にするたびに、ページ上のすべてがわずかに左右にずれることです。
これはよくある問題ですか?これを引き起こしている原因と、ページの他の要素が動かないように修正するために何ができるかを知っている人はいますか?
これはおそらく、ブラウザのスクロールバーが表示されたり消えたりして、ページ幅が変更され、中心がどこにあるかが変更されたためです.
最小限のコード スニペットが問題の特定に役立つとは限りませんが、スクロールバーの問題であると思われます。何が起こっているのかを理解するまで、私もこの問題を抱えていました。
もう少し詳細がいいでしょう。表示/非表示がどこかに空のdivを追加している可能性があります。これにより、シフトが説明されます。問題が解決しない場合は、青写真を避けて独自のカスタムグリッドを作成してみてください。それがそれほど難しくない場合は、
クレタスが言ったように、おそらくスクロールバーの問題です。このコードを試してください
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}