13111501

背景画像が消える?

ブラウザ確認時に問題が起きるのは大抵IEですよね!
ある程度は克服していたつもりでいたのですが、今回の問題は知りませんでした。
もし同じ問題に直面された方への手助けになれば幸いです。

Chrome, Safari, Firefoxなどのモダンブラウザでは正しく表示される。

13111501

IE9以下で画像が表示されない

13111502
<html>
	<body>
		<a href=""> 青いボタン</a>
	</body>
</html>

a {
    background: url(blue-btn.png)no-repeat scroll 0 0 transparent;
    display: block;
    height: 42px;
    text-indent: -9999px;
    width: 122px;
}

a:hover {
    background-position: 0 -42px;
}

このソースを見て一瞬で分かった方は、丁寧なソースコードを心が得けている方もしくは場数を踏み経験されてる方…。
問題はこの一文です。
a {
    background: url(blue-btn.png)no-repeat scroll 0 0 transparent;
    display: block;
    height: 42px;
    text-indent: -9999px;
    width: 122px;
}

a:hover {
    background-position: 0 -42px;
}

その問題の部分はno-repeatの前に半角スペースがない!
この半角スペースがないがためにIE9以下では背景画像が表示されなくなるようです。
モダンブラウザでは問題なく表示されてしまうため、見落としがちになるかとは思いますがブラウザチェックは忘れずに行いましょう!


IEでのブラウザチェック方法

なんとIE8以降に実装されているF12開発者ツールで確認が可能です!
これはFirefoxの「Firebug」やChromeのデベロッパーツールのような機能なのですが、その中にブラウザーモードという便利な機能がついています。
そのプルダウンでIEのバージョンを選ぶだけで、レンダリングし表示してくれます。
13111503
IEのブラウザチェックには欠かせない機能ですね!

また、さらに古いバージョンIE6などの表示も確認しなくてはならない場合はIETesterがおすすめです!


おわりに

開発者にとってIEとの戦いはまだまだ続きそうです。
そんな憎きIE6を爆発させるページがあるので紹介させてください!

( ´・ω・` ) ie6bot – 腐った牛乳と呼ばれたブラウザ


いや…これを見るとIEへの考え方も変わる…かもしれません。

Author Profile

アサト
アサト
どうも、アサトです('A`)
Web関係で働きながら副収入の事ばかり考えながら生きてまいす。
良い家と良い車を買うんだ!