下記記述のように、リスト要素内、あるいは横に画像を置くと、Firefoxではきちんと表示されるのですが、IE6で見ると画像を置いた部分だけ指定した行間無視されてしまいます。
対策方法を教えてください。
------------------------
<html>
<head>
<style type="text/css"><!--
body {line-height:300%;}
li img {background-color:#FF0000;}
--></style>
</head>
<body>
<ul>
<li>あああ</li><img src="#" width="10" height="5" />
<li>いいい</li><img src="#" width="10" height="5" />
<li>ううう</li>
<li>えええ</li>
</ul>
</body>
</html>
No.1
204
6
27pt
私の環境ではまったく同じに見えますが、意味が違います？
http://popup.tok2.com/home2/yosiaki/B15.html
No.2
2046
27pt
私の環境ではまったく同じに見えますが、意味が違います？
http://popup.tok2.com/home2/yosiaki/B15.html
No.3
533
26pt
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#l...
line-heightプロパティは「行の高さを計算する」とありますので、各li要素の間隔なら「margin」か「padding」で指定してあげればうまくいくと思います。
また、ブラウザによってスタイルシートの解釈が違うので、複数のブラウザで同じ見え方にしたいのなら、
まずは全称セレクタで全ての書式を初期化してから、個々の要素にスタイル付けしていく方が、若干面倒ではありますが確実だと思います。
CSS2 リファレンス
http://hp.vector.co.jp/authors/VA022006/css/index.html#conte...
因みに例題のソースの場合は、以下の書き方で同じ見え方になると思います。
----------
<html>
<head>
<style type="text/css"><!--
* {
margin: 0;
padding: 0;
line-height:1;
}
body {
margin: 1em;
padding: 1em;
font-size:100%;
}
ul {
margin: 1em;
padding: 0;
}
li {
margin: 1em;
padding: 0;
line-height:1.5;
}
li img {
background-color:#FF0000;
}
--></style>
</head>
<body>
<ul>
<li>あああ<img src="#" width="10" height="5" /></li>
<li>いいい<img src="#" width="10" height="5" /></li>
<li>ううう</li>
<li>えええ</li>
</ul>
</body>
</html>
----------
1
2
1
1
1
1
3
3
会社と家の２台のPCで確認したところ、双方とも下記リンク先のような見え方になります。
http://yayoi.secret.jp/setumei.gif
Firefoxで見えているようにIE6でも等間隔に並べたいのです。
あと、私のソースの記述に間違いがありました。
imgタグは、
の外になっていますが、実際は中に含みます。申し訳ありません。