- ベストアンサー
スタイルシート line-heightのバグ？
ホームページの中で、行幅をあけるのに、line-heightを使っています。 簡潔なタグは以下の通りです。 <html> <body> <span style="font-size:13px; line-height:160%;"> <img src="image/point.gif" border=0 width=6 height=8 alt="">てすと1<br> <img src="image/point.gif" border=0 width=6 height=8 alt="">てすと2<br> </span> </body> </html> 「てすと1」「てすと2」の前に小さな画像を入れています。 WinXP、NN4.XやN7.Xで見た場合は、画像が入っていても問題なく行幅が開きますが、 WinXP、IE6.02で見ると、line-heightが効きません。 これはIEのスタイルシートバグなのでしょうか？ また、打開方法ありましたらお願いします！ （参考まで：テーブルタグを使いたくないのでline-heightで行間をあけています）
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは。 ふーん、こんなバグがあったんですねぇ。 で、打開策になるかどうかはともかく、こうすればＩＥでも行間は反映されましたので、ご紹介しておきます。 <HTML><HEAD> <STYLE type="text/css"> <!-- .SP1{ background-image : url(image/point.gif); background-repeat : no-repeat; background-position : center center;} --> </STYLE> </HEAD> <BODY> <DIV style="font-size:13px; line-height:160%;"> <SPAN class="SP1"> </SPAN>てすと1<br> <SPAN class="SP1"> </SPAN>てすと2<br> </DIV> </BODY> </HTML> 要は<SPAN>タグでスペース（全角）を挟んで背景画像にするわけです。背景画像は元の画像のサイズでしか表示されないので、6px * 8px の画像を作ってください。
その他の回答 (3)
＃1です。 テーブルを使用した場合でも <img src="image/point.gif" border=0 width=6 height=8 alt=""> <img src="image/point.gif" border=0 width=6 height=8 alt=""> ↑連続すると行幅が反映されません。 １つだと指定幅よりも狭く反映されます。 とりあえず連続するとline-heightがまったく反映されないようです。バグなんでしょうね。
- selene_pl
- ベストアンサー率49% (102/207)
spanがインライン要素（一行のみ）なのに対して、 line-heightは複数行に渡る文書を書くときに使うからかもしれません。 とりあえず、spanの代わりにdivを使ってみてはどうでしょうか？
補足
回答ありがとうございました！ 応用して、 DIV、h2、h3、P、などなど試してみたのですが IE6には何の変化もありませんでした；
下記参考URLにバグらしきことが書いてあります。 こちら↓で指定するとIE6.02では行幅が開きます。 line-height : 15px; しかし、NN4.XやN7.Xでは動作確認していません。
補足
早速の回答ありがとうございました。 やってみましたが、 （line-height : 20px; line-height : 30px;など） ネスケではちゃんと30PX開くのですが、IE6では何も変化ありませんでした、、、 (-_-;)
お礼
ありがとうございました。 なんとか出来たみたいです♪ こういう場合って結構あると思うので、IEが早く直してくれる事を… ・・・無理かな～（笑）