[ＩＥ]でのすき間をなんとかしたい、

[新着] Webテンプレートを仮オープンしました

0   名前： サスケ ： 2007/04/07（土） 13:20  ID:JZzz63/q sub-v7
お世話になります。

<div></div>内の画像（TEST画像）の下に隙間が開いてしまいます、
[IE]だけでの現象でNETsacape,Firefox,Opera等ではピッタリと納まります。
※画像は[ＴＥＳＴ]とかかれたもので、<div>の背景色は[赤]に設定してあります。

[IE]でもテスト画像の下に隙間なく配置するにはどうすれば良いのでしょうか。

お分かりの方、なにとぞアドバイス宜しくお願いいたします。


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<meta http-equiv="content-script-type" content="text/javascript">

<STYLE TYPE="text/css">
<!--
* { margin: 0; padding: 0; }

body {
background: #37393B;
}

.test {
width: 130px;
height: 20px;
background-color: red;
margin: 30px auto 50px auto;
}
-->
</style>
</head>

<body>

<div class="test">

<img src="http://www.nizm.co.jp/test.gif" width="130" height="20">

</div>


</body>
</html>
1   名前： 五月雨 ： 2007/04/07（土） 13:20  ID:XPVjFDBw sub-gm
原因は解りませんが、img要素の後ろに空白文字があると隙間ができてしまうようです。
以下のように書けば、隙間はなくなります。
<div class="test"><img src="http://www.nizm.co.jp/test.gif" width="130" height="20"></div>

ちなみに、IE6 のみ画像の下に隙間ができることを確認しました。(IE7 では隙間が発生しませんでした)
2   名前： サスケ ： 2007/04/07（土） 13:20  ID:nYImEVpd sub-v7
五月雨さん、

アドバイスありがとうございました。
おっしゃる通りの記述ですき間がなくなり問題は解決しました。

空白文字、全角空白などには木をつけているのですが、この様に表示されるのははじめてですので何とか原因が知りたいのですが、多分原因は分からないのでしょうね、１文字１文字いじって何か原因がつかめればいいのですが。

本当にありがとうございました、助かりました。

サスケ
3   名前： 匿名 ： 2007/04/07（土） 13:20  ID:X4mJ.490 sub-Cz
開始タグ前後、終了タグ前後の空白類（空白文字、改行文字）がどう処理されるか調べてみれ。割と FAQ ものだよ。

# あと、Strict を宣言するなら div 要素直下にインライン要素を置かないことをおススメする（文法上は問題ないが、ちょっと気持ち悪い）。
4   名前： サスケ ： 2007/04/07（土） 13:20  ID:nYImEVpd sub-v7
匿名さん、
アドバイスありがとうございます。

（空白〜）にはよく悩まされます、以前ほどではないのですが。
この際（？！）アドバイスの通り”空白類（空白文字、改行文字）”のことを調べてみます
どうもありがとうございました。

サスケ
5   名前： 五月雨 ： 2007/04/07（土） 13:20  ID:XPVjFDBw sub-gm
SGMLによれば、「開始タグ直後の行区切り及び終了タグ直前の行区切りは共に無視すべきである」とあります。

Performance, Implementation, and Design Notes (ja)
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#notes-line-breaks


私はこれを鵜呑みにしていましたが、このルールに従わないブラウザもあるようです。勉強になりました。

HTML文書中の改行文字について
http://www.asahi-net.or.jp/~wq6k-yn/kaigyo.html
ホームページ キッチン-- ホワイトスペースについて
http://www.pw-design.jp/recipe/04/recipe04-1.html
6   名前： サスケ ： 2007/04/07（土） 13:20  ID:3RJ8JWHR sub-v7
五月雨さん

ふたたびアドバイスありがとうございます。
ここに来て、空白文字などの知識もある程度必要であることが
分かりました。
五月さんの紹介していただいたサイトでも勉強させていただきます。

ありがとうございました。
一覧へ戻る