プロが教える店舗＆オフィスのセキュリティ対策術

Firefoxで下の隙間が開く

解決済

  • 質問者：takumana20
  • 質問日時：
  • 回答数：3件

http://oshiete1.goo.ne.jp/qa4870757.html　この質問の続きですが、
Firefoxで下の隙間があきます。IEでは隙間が無いです。Firefoxで一番下までスクロールしても下の隙間を無くす方法をお願いします。
**********************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
上のDTDで隙間が開く　下のDTDなら開かない
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

scriptは、xrea.comの見本です。　scriptは一番下に置きたいのです。
下記例のHTMLは単純な例です。
**********************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>最終行の表示テスト</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css"><!-- *{margin:0 50px;} #body{border-left:1px solid red; border-right:1px solid blue; background-color: #EEE;} --></style>
</head>
<body>
<div id="body">
<p style="padding-top: 800px;">最終行</p>
</div>
<script type="text/javascript"><!--
var ID="100000000-INDEX";
var AD=1;
var FRAME=0;
// --></script>
<script src="http://j1.ax.xrea.com/l.j?id=100000000-INDEX" type="text/javascript"></script>
<noscript>
<a href="http://w1.ax.xrea.com/c.f?id=100000000-INDEX" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100000000-INDEX&url … alt="AX" border="0"></a>
</noscript>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： abril
  • 回答日時：

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が指定されているのも変なので…。

いかがでしょうか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

出来ました＼(^o^)／本当にありがとうございました。

*{margin:0 50px;}は実際には使ってないのですが、サンプルのボーダーが見やすいと思って横だけ50pxにしていました<(_ _)>

最後に１つだけ質問させて下さい。色々やっている内に
divでmargin:-10px　とかマイナスmarginでも良いかなとか思ったのですが、この使い方は、不具合になるのでしょうか？

通報する
お礼日時：2009/04/15 14:39

No.3

  • 回答者： abril
  • 回答日時：

ANo.1-2です。



> divでmargin:-10px　とかマイナスmarginでも良いかなとか思ったのですが、この使い方は、不具合になるのでしょうか？

この場合のマイナス・マージン（"margin-bottom: -10px;"）はどちらへの指定を想定されていますか？#bodyの方であれば、確かにFirefoxでの隙間は解消されますが、今度は逆にIE6の方が「最終行」の文字が下10px分ウィンドウの外に隠れてしまいますので、いずれにせよハックなどによる振り分けをする必要が出てくると思います。
#hogeの方であれば、何も変わらないままです。

マイナス・マージン自体は色々な局面で使いでのある手法ですが、前後の要素を巻き込んだ不具合が出ない様に充分に配慮して指定を考える必要はありますね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

よくわかりました。何度も本当にありがとうございました。NO2の方にお礼をつけさせていただきます。

通報する
お礼日時：2009/04/16 11:08

No.1

  • 回答者： abril
  • 回答日時：

ソースをそのまま貼り付けたダミー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>

補足日時：2009/04/14 19:30
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報