キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。
IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。
よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。
毎度のようにサンプルも用意してみました。
発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。
img要素にテキストが隣接してても同様でした。
サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・
取りあえず、今回のサンプルに使ったソースは以下です。
<ul> <li><a href="/"> <img src="./img/share/unav_privacy.gif" alt="個人情報保護方針" /> </a></li> </ul>
CSSはこんな感じ↓
#main ul li {
list-style-type: none;
height: 26px;
}
#main ul li a {
padding-left: 18px;
background: url(../img/item/mark.gif) no-repeat 0px 7px;
}
#main ul li img {
vertical-align: top;
}
これで、IE8だけ背景どこいったー？って感じになります。
a要素の指定をやめて、img要素やli要素なら問題なかった。
んで、どーしたらなおるかなぁってことで、以下のようにしたらなおったので取りあえず良し。
#main ul li a {
display: inline-block;
padding-left: 18px;
background: url(../img/item/mark.gif) no-repeat 0px 7px;
}
display: inline-block;の指定がこんなところでも役立つなんて思わなかった。
li要素部分はp要素とかブロックレベルなら同じでした。
a要素に関しては、span要素などのインラインでも同様にずれちゃった。
何が原因なのかイマイチですが、background-positionの値とか単位を変えたりしてもIE8だけおかしくって、img要素に指定しているvertical-alignの値も変えてみたけどやっぱりIE8が変でした。
コレってやっぱりバグですかね。
きっとこれから色々バグっぽいの見つかると思うと・・・・あぁ・・・
CSS3対応の少なさに萎えてるだけに、何ともせちがらいですわー。