Learning-Life.Net

(X)HTMLでマークアップしたテキストを、CSSで「text-indent:-9999px;」などとして画面外に移動させ見えなくし、背景画像で置き換えると言うテクニックがあります。これを用いたwebページを、IE5.0（Windows）で確認していて気づいたことをメモしておきます。

対象ブラウザ

IE5.0(IE5.5以上では影響なし)

症状

特定のセレクタに対して、「text-indent:-9999px;」などとしテキストを画面外に移動させ、同時に背景画像を「background: url(sample.jpg);」などと指定する。この時、heightをピクセル値で指定している（%だと問題なし）と、背景画像もtext-indentの値で移動してしまう。この結果、「background: url(assets/newsTop.jpg) no-repeat;」と繰り返し表示をしない設定にしておくと、背景画像部に何も表示されない。no-repeatを指定しない（繰り返し設定）場合は、text-indentで移動させた場所から画像が繰り返し表示されるため、画像がずれて表示されることがある。

対策

background-positionの位置がtext-indentに引きずられてしまっているので、background-positionとしてrightやright topを指定する。背景画像にwidth値を指定する際には、widthで指定した背景画像表示範囲もbackground-positionに基づき画面外に移動してしまうため、背景を設定するセレクタの外側のセレクタでwidthを指定する。別の方法としては、外側のセレクタでheight値をピクセル単位で設定しておき、text-indentを設定するセレクタでは「height:100%;」などとパーセンテージで指定する。