2009.02.26
hタグにそのままテキストを入れてみせるのではなく、
CSSで背景に画像を指定して、HTMLにかいたテキストは飛ばしてしまう。
よくやる手法だと思います。
が、たまにwidthもhightもmarginもpaddingも全部設定したにもかかわらす、
下に隙間が空いてしまう事があります。
そんな時はたいていIE6自体が持っているスタイルシートで指定された
フォントサイズと行間が、自分のスタイルシートで指定したhightをこえてしまっているのが
原因と思われます。
例えばIE6のスタイルシートではh1に入るテキストは18pxと指定されているとします。
でも自分が背景に指定した画像の高さは11pxなのでhightを11pxで指定します。
そうすると文字を飛ばしているとはいえ、
18pxの文字が入っている事になり、下に7pxの不明な隙間が出来てしまうのです。
これを解消するには、自分がhを指定したスタイルシートに、
下記の指定を追加します
overflow:hidden;
たったコレだけの事がないために苦労してしまうことになります。
CSSで背景に画像を指定して、HTMLにかいたテキストは飛ばしてしまう。
よくやる手法だと思います。
が、たまにwidthもhightもmarginもpaddingも全部設定したにもかかわらす、
下に隙間が空いてしまう事があります。
そんな時はたいていIE6自体が持っているスタイルシートで指定された
フォントサイズと行間が、自分のスタイルシートで指定したhightをこえてしまっているのが
原因と思われます。
例えばIE6のスタイルシートではh1に入るテキストは18pxと指定されているとします。
でも自分が背景に指定した画像の高さは11pxなのでhightを11pxで指定します。
そうすると文字を飛ばしているとはいえ、
18pxの文字が入っている事になり、下に7pxの不明な隙間が出来てしまうのです。
これを解消するには、自分がhを指定したスタイルシートに、
下記の指定を追加します
overflow:hidden;
たったコレだけの事がないために苦労してしまうことになります。
コメントする