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

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

こんな感じ↓
ws000000

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さん…

火曜日, 12月 13th, 2011 browser, css, History, html / xhtml, Internet Explorer, JavaScript

Leave a Reply

コメントを投稿するにはログインしてください。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31