http://d.hatena.ne.jp/notjust/20050221
に詳しくまとめました。
本当によろしくお願いします。知りたいです。
ずばりWinIEのバグです。
実はa要素のwidth指定はこのバグを回避するためでもあったわけです。
以下、とりあえず逃げるためのソース。
br.clear {
clear: both;
height:0;
}
<p>
<a href=”#” id=”box”>
<span class=”box_title”>中を整形したい</span>
<span class=”box_body”>
<img src=”test.png” width=”100” height=”100” alt=”pict” title=”pict”>
適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。
<br class=”clear”>
</span>
<br class=”clear”>
</a>
</p>
ちょいと下にスペースが空き不格好ですが、自分が思いついたのはこのくらいです。
サンプル1では理想の動きなのに(IEでも)
自分で設置されたサンプル2では動かないって内容ですよね?
私もwinIEですがサンプル1は動いて、
サンプル2は動きませんでしたが
ちょっと直しただけで動くようになりましたよ
id=”box” で指定しているので
一つ目のIDをbox、二つ目をbox2とかにしてみて下さい
IDは一つの画面で一意である必要がありますので。
Nameはかぶってもいいんですが・・
複数のボックスを画面に表示する場合は
ID指定ではない方が良いと思います
す、すいません。回答ありがとうございます。
サンプル2を、回答にいただいたちゃんとしたソースであるサンプル1の、Widthだけを変更したものに変えました。
サンプル1は理想的な動作なのですが、
1)Width幅が狭い
2)文章量が、画像サイズに比べて多い
というような理由からなのでしょうか、ボックス要素にしてあるタグのWidth幅を広げると問題が起こります。
WinIEで見ると、文章下部にリンクの貼られていないスペースがぽこんと有るはず、です。
その「リンクの隙間」をどうやったら、WinIEで回避できるのかが、ぼくの知りたいことです。
*初めの回答によると、バグらしいのですが…。
それを直すにはどうすればいいか、知りたいのです。
おお、できた…。ありがとうございます。
バグ…。それは、どうしようもない。
でも、今Safariではどうしようもないコトになっている。
難しい…。