例えば、
<div style="line-height:200%">
一行目<br>
二行目<br>
三行目<br>
四行目
</div>
とすれば、それぞれの行間(行の前後の余白)は通常の200%となりますよね。

このとき文章内に(文字と同じくらいの高さの)画像を入れると、IEではその行前後に行間が開かないようなのですが、どうすればよいのでしょうか。
Netscapeでは文章と同じように行間が開いて表示されるのですが。

<div style="line-height:200%">
一行目<br>
<img src="gazou.gif">二行目<br>
<img src="gazou.gif">三行目<br>
四行目
</div>

のようにすると、二行目と三行目に行間が開きません。
(二行目と三行目のそれぞれの行の前後に余白がありません。)

ちなみに、DTDは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ですが、システム識別子をつけても同様でした。
※準拠にしたらtd,th内にも適用されました。余談ですが。

IEで、画像を含んだ行にline-heightを適用させるにはどうすればよいのでしょうか。
誤った表現をしていたら申し訳ありません。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

テキスト以外のものが含まれるブロックでline-heightを使うと環境によっては不具合が出というようなコトをどこかで読んだ気がします。



IEではver.5から layout-grid が実装されているので、コレを使ってみてはどうでしょう?


<div style="line-height: 2em;layout-grid-line: 2em;">
一行目<br>
<img src="gazou.gif" width="50" height="15">二行目<br>
<img src="gazou.gif" width="50" height="15">三行目<br>
四行目
</div>
    • good
    • 0
この回答へのお礼

layout-gridなんてプロパティを気にも留めていませんでした。
先ほど試したところ、応用して利用したら理想の表示に近づきましたw

でも、このプロパティの指定は何か難しいですね。
プロパティ値の基準が分からないので…。%指定とかどうなっているのか…。

このプロパティを併用することでIEでも同様の表示ができそうなので応用していきたいと思います。
回答ありがとうございました☆
もう少ししたら締め切りたいと思います。

お礼日時:2005/04/18 16:44

img {margin:5px 0;}


のように、imgだけ別に設定するのはどうでしょうか。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
しかし、imgのマージンで指定してしまうとテキストと合わなかったりで不都合が生じてしまうのです…。

各々の行をブロック要素で囲ってしまって、そのブロックに対して上下マージンをつければ多分理想通りの表示になるのですが、行をそれぞれ囲うのも…。
line-heightのような指定が画像を含む行に対しても有効になるような方法はどうなのでしょう…。

お礼日時:2005/04/18 00:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング