1

これが、ブラウザー検出に頼る必要がある状況でないことを願っています。

基本的に、私は大きなテーブルを含むページを持っているので、ページを下にスクロールすると表示される (そして表示されたままになる) "position: fixed" プロパティを持つ追加のヘッダーを作成しました (いくつかの非常に単純な JS コードを使用します)。

ただし、そのヘッダーの列をより大きなテーブルの列と正しく並べるために、各列の「幅」プロパティを (両方のテーブルで) 手動で設定しています。余分な背景画像がないため、通常のテーブル ヘッダー セルとまったく同じです。(上記のリンクからページ自体を見るだけで、これらすべてが理解しやすくなります。)

問題は、ある幅のセットが Firefox で機能し、別のセットが Safari/Chrome で機能し、Opera ではどちらも機能しないことです。私の CSS はこの種の状況を処理するのに最適ではないかもしれないと推測していますが、それを改善する方法がわかりません。誰かが（おそらくFirebugなどを使用して）見て、すべてのブラウザですべてが整列するようにするこれを処理するより良い方法があるかどうか教えてもらえますか？

更新: Firebug の問題をいじって、原因を絞り込みました。最初に背景を少し。「フローティング」ヘッダー用にテーブルの完全に別のクラスを作成する代わりに、特別な ID (「フローター」) を与えて、通常のテーブルからほとんどの CSS を継承できるようにしましたが、背景を変更しました。画像を同じサイズの透明なものに変更し (間隔を維持するため)、「表示: なし」に設定します。ここに貼り付けている私のJS：

$(window).scroll(function () {
     var header = document.getElementById("floater");
     if (($(window).scrollTop()) > ($(document).height() / 142)) {
        header.style.display = "block";       
     } else {
        header.style.display = "none";

 }
});

ページの特定のポイントを過ぎてスクロールすると、「表示」が「ブロック」に変わります。

私が発見したのは、ページを読み込んで、スクロールしようとする前に、Firebug を使用して「display: none」スタイル設定を無効にすると、フローティング テーブルのセルが完全に間隔を空けられていることです。ただし、ページを下にスクロールし始めて JS が起動するとすぐに、列の幅が変わります! しかし、その時点で Firebug に入り、CSS パネルで「display:block」を無効にすると、位置合わせが修正されます。

だからheader.style.display = "block";、私がやりたいことをしていません。「display:none」CSS を逆にするだけでなく (これは私が望んでいることです)、どういうわけか列幅をリセットしています。についても同様ですheader.style.display = "inline"。「display:none」を単に無効にするために使用できる別の JS ステートメントはありますか?

4

1 に答える 1

0

最初に適切な CSS リセット スタイルを適用してみましたか?

例http://meyerweb.com/eric/tools/css/reset/

問題は、すべてのブラウザに一連の「デフォルト」スタイルがあることです。すべてのスタイルを変更しない場合、特定のブラウザーのデフォルトの一部が使用される可能性があります。リセットすると、すべてのブラウザが同じ場所から起動します。

CSS スタイルをクロスブラウザーにしたい場合は、リセットを使用する必要があります。

于 2012-08-12T03:29:29.597 に答える