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

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

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

01.<?xml version="1.0" encoding="utf-8"?>
02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
04.<head>
05.<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
06.<meta http-equiv="X-UA-Compatible" content="IE=edge" />
07.<meta http-equiv="Content-Style-Type" content="text/css" />
08.<title>inline-block test</title>
09.<style type="text/css">
10.    div#design ul {
11.        display:block;
12.        width:550px;
13.    }
14. 
15.    div#design ul.ie7out li {
16.        display:inline-block;
17.        width:146px;
18.        height:80px;
19.        /display:inline;
20.        /zoom:1;
21.        text-indent:-9999px;
22.    }
23. 
24.    div#design ul.ie7ok li {
25.        display:inline-block;
26.        width:146px;
27.        height:80px;
28.        /display:inline;
29.        /zoom:1;
30.    }
31. 
32.    div#design ul.ie7ok li span {
33.        display:none;
34.    }
35. 
36.    div#design ul li.a {
37.        background:url(circle_banner_01.gif) no-repeat;
38.    }
39. 
40.    div#design ul li.b {
41.        background:url(circle_banner_02.gif) no-repeat;
42.    }
43. 
44.    div#design ul li.c {
45.        background:url(circle_banner_03.gif) no-repeat;
46.    }
47.</style>
48.</head>
49.<body>
50.<div id="design">
51.<p>IE7で消える?</p>
52.<ul class="ie7out">
53.    <li class="a">A</li>
54.    <li class="b">B</li>
55.    <li class="c">C</li>
56.</ul>
57. 
58.<p>IE7でも消えない?</p>
59.<ul class="ie7ok">
60.    <li class="a"><span>A</span></li>
61.    <li class="b"><span>B</span></li>
62.    <li class="c"><span>C</span></li>
63.</ul>
64. 
65.</div><!-- END div#design -->
66.</body>
67.</html>

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

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

1./display:inline;
2./zoom:1;

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

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

コメントを残す

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