まあ、いまさら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などのメジャーブラウザで確認してみてください。メジャーブラウザでは両方とも画像が表示されます。