IE対策:改行される可能性のあるインライン要素に背景画像を指定しない。

痛い目にあったので忘れない内にメモ。

改行されるインライン要素に、背景画像で右側に指定しない。

  • IEでは一行目にしか背景画像が表示されない
  • background-position で right bottom を指定すると表示されなくなる
  • zoom:1 を入れても文字の終わりには正しく表示されない

サンプルHTMLはこちら

サンプルHTMLに詳しく書いていますが、IE6でのスクリーンショットをいくつか。
(IE7でも再現します)
[background-position:right center ]と真ん中右寄せした場合
IE6 スクリーンショット1

zoom:1; を指定した場合
IE6 スクリーンショット2

妥協解決策:インライン要素(ここでは<a>)の最後に<span>を入れた場合
IE6 スクリーンショット3

空spanを使うのであまり気持ちよくない解決方法。
もし良い方法があったら教えてくださいませ。

参考サイト)インライン要素のrepeat-x背景画像が1行目にしか表示されない(5.x/6.0)

コメントを残す

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

CAPTCHA


*