0

このサイトのフロントエンド部分を開発しています: http://oq.totaleclips.com

http://oq.totaleclips.com/mpa/The_Hunger_Games_(Movie_2012)のような映画リストの 1 つを見ると、Opera と Internet Explorer 9 で横スクロールが表示されます。`body {overflow-x: hidden} を CSS で使用すると、期待どおりの結果が得られますが、ユーザーが [いいね] ボタンを押してコメントを求めるプロンプトが表示されると、Facebook の [いいね] が切断されます... Facebook で「いいね」をするのが難しくなります。

これは Facebook の問題ですか、Opera の問題ですか、それとも両方ですか? オーバーフローの原因となっている DOM 要素が見つかりません。Facebook Like iFrame が Like ボタンの右側のスペースを「予約」している可能性があると思いますが、それを想定したくありません。Facebook ボタンは Opera でも機能しないようですが、これは副次的な問題です。

私は Firefox と Chrome を使用して開発を行ってきましたが、IE9 へのアクセスが制限されていたため、Windows コンピューターから見たときに水平スクロールを発見してがっかりしました。次に、Opera が同じことを行うのを見ると、IE9 に腹を立てることはほとんどありません。また、Facebook の Like ボタンを左に移動すると、ボタンとそれに続くソーシャル ボタンの間に望ましくない改行が発生します。

オーバーフロー/水平スクロールの原因は何ですか?また、このような問題を自分で発見するにはどうすればよいですか?

具体的な編集: 水平スクロールバーを右にスクロールすると、画面レイアウトの右端に白い列が表示されます。これは、ブラウザー ウィンドウのサイズを水平方向に変更すると解消されますが、DOM には表示されません。ボディ内のページの要素は、右側の空白に流れ込んでいません。

4

1 に答える 1

2

オーバーフローの原因となっている DOM 要素が見つからない

これがあなたの犯人です：

.screener .content {
    margin: auto;
    width: 61em;
}

61emフォントサイズと使用可能なウィンドウ/タブ幅に応じて、少しだけかもしれません。

于 2012-09-05T18:32:24.240 に答える