IEのバグに悩まされていた。
右の図。
現在作成中の画面です。
上半分はIE。下半分はOperaで表示させたときのものです。
通常、Operaを使用しているので、ごく最近まで気づかなかったのですが、
IEで表示させると、どうも行間が詰まる。
div要素のline-heightプロパティに1.8と設定しているのですが。
で、よくよく見てみたら
画像(imgタグ)が含まれている行だけ、行間が狭くなってる。
なぜだろうと思って、ぐぐってみた。
見つかった。
IEバグ:img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる|CSS HappyLife
ということ。
英語ですが、ここも(サンプルあり)
Microsoft Internet Explorer: Line-height / Replaced Element Bug
imgタグだけでなく、input、textareaなどでも同様の現象が起こる模様。
対策としては、画像の上下にpaddingプロパティで間隔をあけてやるしかないみたい。
だけど、正常に見えてるブラウザに対してはハックで対処してやらなきゃならない、と。
具体的な方法については、これから考えます。
現在作成中の画面です。
上半分はIE。下半分はOperaで表示させたときのものです。
通常、Operaを使用しているので、ごく最近まで気づかなかったのですが、
IEで表示させると、どうも行間が詰まる。
div要素のline-heightプロパティに1.8と設定しているのですが。
で、よくよく見てみたら
画像(imgタグ)が含まれている行だけ、行間が狭くなってる。
なぜだろうと思って、ぐぐってみた。
見つかった。
IEバグ:img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる|CSS HappyLife
ということ。
英語ですが、ここも(サンプルあり)
Microsoft Internet Explorer: Line-height / Replaced Element Bug
imgタグだけでなく、input、textareaなどでも同様の現象が起こる模様。
対策としては、画像の上下にpaddingプロパティで間隔をあけてやるしかないみたい。
だけど、正常に見えてるブラウザに対してはハックで対処してやらなきゃならない、と。
具体的な方法については、これから考えます。
このネタへのコメント:
コメントはありません。