タグ: CSS

投稿日:

IE7のcssでの画像置換がおかしい

まあ、いまさらIE7？とか言われそうですが、アクセスログを取得している限りまだまだ捨て切れません。（さすがにIE6は切り捨てましたが･･･）

で、よくあるcssでの画像置換に関してなのですが、IE7で妙な挙動をします。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>inline-block test</title>
<style type="text/css">
	div#design ul {
		display:block;
		width:550px;
	}

	div#design ul.ie7out li {
		display:inline-block;
		width:146px;
		height:80px;
		/display:inline;
		/zoom:1;
		text-indent:-9999px;
	}

	div#design ul.ie7ok li {
		display:inline-block;
		width:146px;
		height:80px;
		/display:inline;
		/zoom:1;
	}

	div#design ul.ie7ok li span {
		display:none;
	}

	div#design ul li.a {
		background:url(circle_banner_01.gif) no-repeat;
	}

	div#design ul li.b {
		background:url(circle_banner_02.gif) no-repeat;
	}

	div#design ul li.c {
		background:url(circle_banner_03.gif) no-repeat;
	}
</style>
</head>
<body>
<div id="design">
<p>IE7で消える？</p>
<ul class="ie7out">
	<li class="a">Ａ</li>
	<li class="b">Ｂ</li>
	<li class="c">Ｃ</li>
</ul>

<p>IE7でも消えない？</p>
<ul class="ie7ok">
	<li class="a"><span>Ａ</span></li>
	<li class="b"><span>Ｂ</span></li>
	<li class="c"><span>Ｃ</span></li>
</ul>

</div><!-- END div#design -->
</body>
</html>

こんなコードで試してみました。

display:inline-block;を利用して横に画像を並べるコードですが、IE7では対応していないため良くあるハックを使用しています。

/display:inline;
/zoom:1;

この状態でtext-indent:-9999px;として文字を飛ばすとIE7の場合だけ画像ごと飛んでいってしまいます。display:inline-block;を利用していますので、display:none;と言うわけにもいきません。

そこで面倒ですがliタグの中にさらにspanタグを入れて、そのspanタグを文字ごと飛ばす方法で対応してみました。環境のある方は上記コードでIE7とFirefoxなどのメジャーブラウザで確認してみてください。メジャーブラウザでは両方とも画像が表示されます。