0

この一般的な構造を持つ Web ページがあります。

<div id="container">
  <div id="basicSearch">...</div>
  <div id="advancedSearch" style="display: none">...</div>
<div>

この CSS では:

#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}

このページには、ユーザーが「基本」検索と「高度な」検索を切り替えるためのリンクがあります。トグル リンクは、次の Javascript を呼び出します。

var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
    advanced.style.display = '';
    basic.style.display = 'none';
} else {
    basic.style.display = '';
    advanced.style.display = 'none';
}

これはすべてIEでうまく機能します。

これは Firefox でも機能しますが、ただし、ある div から別の div に切り替える (つまり、表示/非表示) と、Firefox でページが「移動」します。前後に切り替えると、「コンテナ」内のすべてのテキストが左右に約 5px 移動します。理由を知っている人はいますか？

4

5 に答える 5

5

スクロールバーが表示/非表示になっていますか?

于 2009-03-23T21:30:06.980 に答える
4

コンテンツを切り替えると、ページ コンテンツの高さが高くなる場合があります。ページ幅にわずかに影響するため、スクロールバーが表示されるかどうかを確認します。

于 2009-03-23T21:31:23.000 に答える
1

XHTML が適切に形成されていることを確認してください。ぶら下がっている DIV のように聞こえます (これには firebug が役立ちます)。

余談ですが、jquery には、この切り替えをより見やすくする素晴らしいアニメーションがいくつかあります。

于 2009-03-23T22:10:55.743 に答える
-1

理由はわかりませんが、Firefox プラグインの Firebug をインストールすると、問題のデバッグに使用できます。

Firebug のおかげで、CSS や div の表示と非表示に関するデバッグの時間を節約できました。

firebug を使用すると、2 つの div の違いを確認できます。

Firefox から、[ツール] メニューを選択し、[アドオン] をクリックし、[アドオンの取得] をクリックして、firebug を検索します。

表示する前に非表示にすると、ちらつきが少なくなる可能性があります。ページが高くなる原因になっている場合は、これが問題の原因である可能性があります。

これが役立つことを願っています。

于 2009-03-23T21:29:51.240 に答える