こういった事がしたいのですが...（2）

質問

http://oshiete1.goo.ne.jp/qa4913266.html

↑やっとできたと思ったら問題が発生しました...
safariとfirefoxは問題なかったのですが
IEでは文章の2行目以降が画像の下に回り込んでしまいます。

.artT {
width:555px;
height:1%;
}
とやってもダメでした...。
他にバグを直す方法をご存知ですか？

回答No.1

abril · ベストアンサー

http://oshiete1.goo.ne.jp/qa4913266.html
上記の質問で参考としてあげさせていただいた方法の具体的サンプルです。
内容によってはもっと相応しいマークアップがある様にも思われますが、とりあえずそこはおいおい考えて下されば良いことなので、現状どおり（divにpとpで入れ子）にしておきます。
※CSSは、先の質問で添付された画像のイメージに近づけてあります。

div.hoge {
width: 500px;
padding: 10px 0;
border: dotted 1px #000;
}
div.hoge p {
zoom: 1;
display: table-cell;
_display: inline;
vertical-align: middle;
}
*:first-child+html div.hoge p {
display: inline;
}
div.hoge p.image {
width: 120px;
text-align: center;
}
div.hoge p.caption {
width: 370px;
}

<div class="hoge">
<p class="image"><img src="images/photo.jpg" alt="hoge" width="100" height="100"></p>
<p class="caption">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト…（増減して結果を試してみてください。）</p>
</div>

IE6/7、Firefox2/3、Opera9.61、Safari3での表示結果を確認済みです。

お礼

すごい。
全く問題ありませんでした。
なんと言うか...ホントに助かりました。
ありがとうございました。