IE6でhタグの下に出来る隙間
2009.02.26
hタグにそのままテキストを入れてみせるのではなく、
CSSで背景に画像を指定して、HTMLにかいたテキストは飛ばしてしまう。
よくやる手法だと思います。
が、たまにwidthもhightもmarginもpaddingも全部設定したにもかかわらす、
下に隙間が空いてしまう事があります。gawk

そんな時はたいていIE6自体が持っているスタイルシートで指定された
フォントサイズと行間が、自分のスタイルシートで指定したhightをこえてしまっているのが
原因と思われます。

例えばIE6のスタイルシートではh1に入るテキストは18pxと指定されているとします。
でも自分が背景に指定した画像の高さは11pxなのでhightを11pxで指定します。
そうすると文字を飛ばしているとはいえ、
18pxの文字が入っている事になり、下に7pxの不明な隙間が出来てしまうのです。crying

これを解消するには、自分がhを指定したスタイルシートに、
下記の指定を追加します
overflow:hidden;
たったコレだけの事がないために苦労してしまうことになります。wink
| コメント(0)

コメントする

※JavaScriptが有効になっている必要があります




月別アーカイブ