スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

IE6で「line-height」の値が小さいとデバイスフォントが欠ける

update : 2009/06/03

IE6で文字が欠けることがあります。
「文字が欠ける」というのは、テキスト上部と下部で1pxぐらいのラインが表示されないという現象。
例えば、私の場合はブラウザ間で見た目を統一するために、line-heightプロパティを設定したり、リストのマークの位置を揃えようとする場合によく発生します。


インターネットで調べてみると、「line-height」と「float」の組み合わせが悪いような記述を見かけますが、実際に検証してみたところ必ずしもそうとはいえないみたいです。

いじくり倒した結果、「line-height」が1.2がボーダーラインということは分かりました。つまり、IE6では「line-height」を1.2より小さな値を設定すると、文字が欠ける現象が発生する可能性があるということです。

またIE6かよ!早くなくなってしまえ!と言いたい気持ちを抑えつつ。
あまり好ましい対策とは言えないかもしれませんが、とりあえずは「line-height」は1.2以上の値で設定するのが安全といえるかもしれません。
もう少し調査が必要ですねぇ。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives