- ベストアンサー
Firefoxで下の隙間が開く
- Firefoxで下の隙間が開く問題についての質問です。IEでは隙間が無いのに対して、Firefoxでは一番下までスクロールしても下の隙間が無くなりません。この問題の解決方法を教えてください。
- この質問では、Firefoxでの表示において、下部に隙間が開く問題が発生しています。Internet Explorerではこの問題は発生しないため、Firefoxの問題と考えられます。どのようにすればFirefoxでの表示における下部の隙間を解消できるでしょうか。
- Firefoxでページをスクロールすると、下部に隙間が開く問題が発生しています。この問題はInternet Explorerでは発生しないため、Firefoxの表示における問題と考えられます。解決策を教えてください。
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1です。補足を拝見しました。 > 下記のスクリプトで隙間ができます。 実際にこちらを挿入して再検証してみました。 ※スクリプト自体の仕様は関知していないので、実行結果がIE6とFirefox2/3・IE7では微妙に異なっている（前者のみ、右下端にロードされてから3秒ぐらいの間、ACCESSANALYZERという画像が表示されます）点は無視させて頂きます。 ---------------------------------------------------------------------- 【サンプル修正版】 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> （省略） <style type="text/css"> <!-- * { margin: 0; } #body { border-left: 1px solid red; border-right: 1px solid blue; background-color: #eee; margin: 0 50px; } #hoge { position: absolute; _position: static; bottom: 0; left: 0; height: 0; overflow: hidden; } // --> </style> </head> <body> <div id="body"> <p style="padding-top: 800px;">最終行</p> </div> <div id="hoge"> <script type="text/javascript"><!-- var ID="100000000"; var AD=4; var FRAME=0; // --></script><script src="http://j1.ax.xrea.com/l.j?id=***" type="text/javascript"></script> <noscript><a href="http://w1.ax.xrea.com/c.f?id=***" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=***" alt="AX"></a></noscript> </div> </body> </html> ---------------------------------------------------------------------- これで検証した結果は、一応、IE6/7、Firefox2/3共に下の隙間はない状態でしたが。 以下は、マークアップとCSSの変更部分についての補足です。 注：オリジナルでは全称セレクタで{margin:0 50px;}としていますが、これだと全ての要素に左右50pxの余白ができて使い勝手が悪いのでは？単に<div id="body">～</div>までウィンドウサイズの左右から50pxづつ余白を取りたいだけなら、全称セレクタでは上下左右の余白を0にリセットするだけにしておいて、#bodyで左右余白50pxを設定すれば良いと思いましたので、上記の様にしました。 (1)スクリプト部分をhogeというidを付与した親要素divで囲む。 (2)#hogeに対するスタイルを以下の様に設定する： (2-1)"position: absolute;"とした上でbottomプロパティで下端からの位置を0とする。 (2-2)ただし、IE6ではこのプロパティの値がabsoluteだと逆に不具合が出るので、アンダースコア・ハックでIE6のみstaticとして続くbottom・leftの値を無視させる。 (2-3)コンテナブロック全体の高さを0に。 (2-4)"overflow: hidden;"で高さをはみ出す分をカット。 ※実際には(2-3)の指定はなくても結果はOKみたいですが、高さを指定していないのにoverflowが指定されているのも変なので…。 いかがでしょうか。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
ANo.1-2です。 > divでmargin:-10px とかマイナスmarginでも良いかなとか思ったのですが、この使い方は、不具合になるのでしょうか？ この場合のマイナス・マージン（"margin-bottom: -10px;"）はどちらへの指定を想定されていますか？#bodyの方であれば、確かにFirefoxでの隙間は解消されますが、今度は逆にIE6の方が「最終行」の文字が下10px分ウィンドウの外に隠れてしまいますので、いずれにせよハックなどによる振り分けをする必要が出てくると思います。 #hogeの方であれば、何も変わらないままです。 マイナス・マージン自体は色々な局面で使いでのある手法ですが、前後の要素を巻き込んだ不具合が出ない様に充分に配慮して指定を考える必要はありますね。
お礼
よくわかりました。何度も本当にありがとうございました。NO2の方にお礼をつけさせていただきます。
- abril
- ベストアンサー率69% (388/560)
ソースをそのまま貼り付けたダミーHTMLで検証してみましたけど、Firefoxの2でも3でも「下の隙間」はできない様ですが…？ 質問者様の環境では、”質問文で提供されたコードのみ”の状態でも、下に隙間ができるのでしょうか？その状態で実際に検証されてみましたか？
補足
本当にすいません・・・ 見本を貼ったのが間違いでした。 下記のスクリプトで隙間ができます。 <script type="text/javascript"><!-- var ID="100000000"; var AD=4; var FRAME=0; // --></script><script src="http://j1.ax.xrea.com/l.j?id=***" type="text/javascript"></script> <noscript><a href="http://w1.ax.xrea.com/c.f?id=***" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=***" alt="AX"></a></noscript>
お礼
出来ました＼(^o^)／本当にありがとうございました。 *{margin:0 50px;}は実際には使ってないのですが、サンプルのボーダーが見やすいと思って横だけ50pxにしていました<(_ _)> 最後に１つだけ質問させて下さい。色々やっている内に divでmargin:-10px とかマイナスmarginでも良いかなとか思ったのですが、この使い方は、不具合になるのでしょうか？