CONFIDELIC

IEバグ？inline配置されたli内で背景画像位置がおかしくなる

inline要素化したli.list01に、先頭にアイコンが付くよう背景画像を設定していたのですが、IEだけそのアイコンがli.list01内で再度出現すると言うバグがありました。

こんな感じ↓

HTML構造とstyle設定は以下のようになっていました。

＜ul class=”listArea”＞
＜li class=”list01″＞＜a href=””＞あああ＜/a＞＜a href=”” class=”delete”＞＜img src=”delete01.gif” alt=”削除” /＞＜/a＞＜/li＞
＜li class=”list02″＞いいいいいい＜/li＞
＜/ul＞

ul.listArea li{
display:inline;
}

ul.listArea li.iine{
margin-right:10px;
padding:0 0 0 15px;
background:url(icon01.gif) no-repeat 0 0;
}

ul.listArea li.list01 a img{
margin-left:5px;
}

＜li class=”list01″＞＜/li＞内では＜a＞要素が2個入っていましたが、この2個目の＜a＞の裏側（削除ボタンdelete01.gifの位置）に、liの先頭に配置したはずのアイコンが再度出てきました。

もともとは、
ul.listArea li.list01 a img{
margin-left:3px;
}
を、
ul.listArea li.list01 a{
margin-left:3px;
}
にしていましたが、この時には今回の問題が出ませんでした。

セレクタを＜a＞ではなく＜img＞への指定に変更したことが問題だったのかというと、これに関連するバグというのが思い当らず、margin設定に問題があるようにも思えませんでした。でもmarginが0だと問題が解消されました。

次にliに指定しているdisplay:inlineに問題があるのではと疑いました。
ここで必殺技のzoom:1;を指定したところ、見事問題は解消されました。
ul.listArea li{
display:inline;
zoom:1;
}

しかし、納得がいきません。
このIEのバグの原因がイマイチわからないままですが、一番納得できる解消法として、li.list01内の2個目の＜a class=”delete”＞に対するセレクタに変更すると言うことで今回は対応しました。
ul.listArea li.list01 a.delete{
margin-left:3px;
}

これはやっぱりバグでしょうか、IEさん…