2

jquery インライン検証プラグインを使用しています: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

ここ：

http://byweb.com/mealbook/user/add

このページを (一番下の [アップロード] をクリックして) 低い画面解像度 (1680x1050 未満) でテストすると、左側への奇妙なスクロールに気付くでしょう (一番上のスクロールがデフォルトで、通常の動作です)... 私はこれを使用しました以前にプラグインを使用しましたが、同様の問題が発生したことはありません...

私のhtml/css構造に何か問題がある可能性があります。それが何であるか知っているなら、助けてください。ありがとう！

4

1 に答える 1

0

削除するbody{overflow-x: hidden;}と、小さいウィンドウ サイズでページの右側に余分なスペースがあることがわかります。この余分なスペースは、#header.

  1. #headerの幅を に設定#logo_main_menuします940px。これは、すべての子要素の合計が 940px になる必要があることを意味します。
  2. その div 内で272pxon#logoと705pxonの幅を設定し#searchます。それらの合計は977pxnot 940px!
  3. さらに悪い#searchことに、 の幅を に設定します#menu。940pxこれは、実際には940 + 272 = 1212pxとして設定したスペースに収まるようにしようとしていることを意味します940px。
  4. #search幅が固定されている他の要素もあると確信しています。

要約すると、固定ピクセル幅を使用する場合は、それらがすべて親コンテナーの幅 (この場合は 940px) になるようにする必要があります。

psこれらの幅を削除してテストしたところ、スクロールはうまく機能しているようでした。横方向の動きはありません。さらに幅を狭くすると、また少し奇妙に見え始めます。body{overflow-x: hidden;}完全にテストするには、 がオフになっていて、すべての幅がコンテナに追加されていることを確認する必要があります。

于 2013-02-23T14:55:42.600 に答える