よくありがちな「サムネイル画像(img) ＋ タイトル(h2) ＋ 説明(p)」という構成をulとliを用いて実現したいのですが、
下記のソースをファイヤーフォックスで見るとＯＫなのですが、ＩＥ６や７で見ると、h2の部分が10数px分下に下がってしまいます。
画像とh2の上端をそろえるにはどうすればよいでしょうか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<style>
* {
margin:0;
padding:0;
}
ul {
width:220px;
list-style-type:none;
}
li {
background:#FFCCCC;
clear:both;
}
img {
float:left;
padding:0 5px 5px 0;
}
h4 {
font-size:14px;
}</style>
</head>
<body>
<ul>
<li>
<img src="#" width="75" height="75" alt="銀座 あいうえお" />
<h4><a href="#">銀座 あいうえお</a></h4>
<p>説明文説明文説明文説明文</p>
</li>
<li>
<img src="#" width="75" height="75" alt="渋谷 かきくけこ" />
<h4><a href="#">渋谷 かきくけこ</a></h4>
<p>説明文説明文説明文説明文</p>
</li>
</ul>
</body>
</html>
宜しくお願い致します。
No.1
426
81
60pt
記述されている HTML では h4 になっていますが……
一番手っ取り早いのは h2(4) のスタイルに display : inline を加えてやることだと思います。
1
1
1
1
1
57
55
h4の件、すみません、記述ミスでした。
おっしゃるとおりにdisplay:inlineでうまくいきました。
自分でやった解決策はhxをフロートライトにし、widthをあたえ、text-align:leftを入れたというものです。
インライン要素に変換してしまったほうが、手っ取り早いですね。
でも、この現象はどういったことなのでしょうか。なぞですね。