IE６で横スクロールバーを消すとIE７では方向キーでのスクロールができなくなります。直し方を教えてください。

質問

ホームページでインラインフレームを使ってるんですが。

IE６だと無意味な所に横スクロールバーがでます。
調べるとoverflow-x: hidden;を追加すれば消えるとあったのでやってみると今度はIE７でキーボードの方向キーでのスクロールができなくなりました。

これはIE７の仕様なのでしょうか？
仕様なら直し方を教えていただきたいのです。

お願いします。

回答No.1

abril · ベストアンサー

今IEが手元にない環境から見ているので、実際の結果を検証できませんが…推測だけしてみます。

インラインフレームで表示される方のHTMLファイル（http://minatukiryu.blog60.fc2.com/index.php）（以下便宜上(a)ファイルとします）のコードと適用されているCSSを拝見しました。
おそらく、ですが(a)ファイルから参照しているCSS：
http://minatukiryu.blog60.fc2.com/template/a_memo_1/style.css
で、メインのコンテンツを納めるtableに対して設定されている以下のスタイルの
.tb {
（省略）
margin-left : auto;
margin-right : auto;
width : 100%;
（省略）
}
これらの部分がインラインフレーム側（（以下便宜上(b)ファイルとします））に横スクロールを出させているのではないかと思います。本来、インラインフレームのwidth属性で820pxという値が決められており、インラインフレーム内のコンテンツ幅がそれより少なければスクロールに関しては初期値の"auto"が適用されますのでこの場合820pxの中での100%という様に解釈されていれば横スクロールは発生しない筈です。IE6以外のモダン・ブラウザではその様にきちんと表示されているのではありませんか？ちなみに今Safariで見ていますが、Safariでは横スクロールは出ていません。
IE6は何かとW3Cの仕様に準拠しない挙動をする問題の多いブラウザですので、本件でも100%や左右マージンの解釈が異なってしまい、インラインフレームの幅よりも内部で表示されるHTMLファイルのコンテンツ幅の方が広い様に勘違いしている為に、本来不要な筈の横スクロールバーが(b)ファイル上で出てしまっているのかもしれません。

(a)ファイルの構成を見る限り、上記の（IE6で不具合を引き起こす原因と仮定している）スタイル部分は削除してしまってもレイアウトにほぼ影響はしないと思われます。一度この部分を削除（あるいは隠す）して、再度IE6での表示を確認されてみてはいかがでしょう。

ちなみに、
> 調べるとoverflow-x: hidden;を追加すれば消えるとあったので

とありますが、そもそもoverflowプロパティというのは「ブロック要素の内容が指定された横幅・高さの領域からはみ出した場合の表示方法を指定」するものですので、"overflow-x: hidden;"が有効になるのは「widthプロパティにより内容領域を指定されたブロック要素が、指定されたサイズよりも内容が大きなサイズをもつ場合」です。
（参考）http://w3g.jp/css/display_position/overflow
今回の場合、(a)ファイルに適用されるCSSの中で
html, body {（省略）overflow-x: hidden;}
としてしまっていますが、これでは「どこがはみ出す対象となるのか」が明確になっておらず定義が意味不明になっています。IE7でキーボード操作によるスクロールに弊害が出てしまっているのは、この妥当でない指定が影響してしまっているのだと思われます。こちらは削除して下さい。

これでだめでしたらこちらの仮定違いということでご容赦下さい。

蛇足ですが、(b)ファイルの方、HTML文書なのにDOCTYPEがなかったり、HTMLとXHTMLの記述が混在してしまっています。CSSやJavaScriptの挙動には、DOCTYPEが関わってくる場合がありますので、この機会に(b)ファイル側のHTMLの文法チェックなどをきちんとしておく事をお奨めしておきます、今後の為に。

お礼

margin-left : auto;
margin-right : auto;
width : 100%;

overflow-x: hidden;
を削除するということでしょうか？

やってみましたが、まだなってないです・・。

ちなみにfirefoxでも横スクロールバーはでませんでした。