0

ウィンドウの幅が 600px 未満の場合に、 Bootstrap レスポンシブに基づくページの右側に 25 ～ 30px の余分なスペースが Firefox と IE である理由を突き止めようと、私は頭を悩ませてきました。流動的なナビゲーション バーと Facebook SDK だけが残るまで、コードの一部を 1 つずつ削除し始めました。Facebook JS SDK リファレンスを削除すると、右側のパディングが消えました。

これはここで見ることができます：

FB JS SDK が含まれ、追加の右側パディング: https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm

FB JS SDK を削除すると、期待どおりに動作します (右側にパディングはありません): https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm

ページのいいねボタンに Facebook JS SDK が必要なため、これを回避するにはどうすればよいですか?

奇妙なことに、Safari と Chrome ではこれは再現されません。

Firefox のスクリーンショット:

ここに画像の説明を入力

IE からのスクリーンショット:

ここに画像の説明を入力

4

2 に答える 2

1

CBroe が示唆しているように、スタイルを変更しようと#fb-rootすることはできますが、スタイルを再度変更する JS アクションがあるか、一部の機能を無効にする可能性があります。

だから私はあなたのスタイルにこれを追加することをお勧めします:

html { overflow-x: hidden; }

この修正により、ウィンドウが非常に小さく、水平スクロールバーが必要な場合に、わずかな問題が発生する可能性があります。パディングが 200px の下に再表示されますが、これを試すことができます:

@media (max-width: 200px) {
    html { overflow-x: auto; }
}

FF13 および IE9 でテスト済み (IE9 ウィンドウのサイズを 200px 未満に変更することはできません)。

于 2012-06-26T08:48:49.977 に答える
0

#fb-rootこれを引き起こしているのは Facebook DIV 要素です。Firebug を使用して設定display:noneまたは配置すると、余分なマージンが消えます。absoluteleft:-200px

ただし、SDK はこの要素を使用してダイアログなどを表示するため、スタイルシートでこれを行うのは良い考えではない可能性があります。そのため、それらが機能しなくなる可能性があります (これを に設定するとdisplay:none、古い IE での機能が完全に停止するはずです)。 SDK は、そのようなフォーマットを再度上書きする可能性があります。

独自のフォーマットを追加する場合は、これを徹底的にテストする必要があります。

于 2012-06-26T07:43:48.700 に答える