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