人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSのバグ?の質問です。
下記記述のように、リスト要素内、あるいは横に画像を置くと、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>

●質問者: t_a_k
●カテゴリ:ウェブ制作
✍キーワード:background-color BODY CSS firefox IE6
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sudayosiaki
●27ポイント

私の環境ではまったく同じに見えますが、意味が違います?

http://popup.tok2.com/home2/yosiaki/B15.html

http://popup.tok2.com/home2/yosiaki/B16.html

http://popup.tok2.com/home2/yosiaki/B17.html


2 ● sudayosiaki
●27ポイント

私の環境ではまったく同じに見えますが、意味が違います?

http://popup.tok2.com/home2/yosiaki/B15.html

http://popup.tok2.com/home2/yosiaki/B16.html

http://popup.tok2.com/home2/yosiaki/B17.html

◎質問者からの返答

会社と家の2台のPCで確認したところ、双方とも下記リンク先のような見え方になります。

http://yayoi.secret.jp/setumei.gif

Firefoxで見えているようにIE6でも等間隔に並べたいのです。

あと、私のソースの記述に間違いがありました。

imgタグは、

  • の外になっていますが、実際は中に含みます。申し訳ありません。


    3 ● chankaz
    ●26ポイント

    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>

    ----------

    関連質問


    ●質問をもっと探す●



    0.人力検索はてなトップ
    8.このページを友達に紹介
    9.このページの先頭へ
    対応機種一覧
    お問い合わせ
    ヘルプ/お知らせ
    ログイン
    無料ユーザー登録
    はてなトップ