vertical-alignでハマる

WEB

非常に単純なvertical-alignの指定でハマる。
解決方法がいまだに分からなくて、とにかくメモメモ。


HTMLはこんなんです。

<p><img src="icon.gif" /><a href="#.html">リンク</a></p>

CSS

img{
vertical-align:middle;
}
a{
font-size:10px;
color:#000000;
}

で、どうもIE7とFF2で表示がちがう。
IEではvertical-alignがきいてくれない感じ。


で、CSSをこういうふうに指定してみたら、ひとまず何とかなりました。

p{
font-size:10px;
}
img{
vertical-align:middle;
}
a{
color:#000000;
}

もしかしたらpタグあたりに別のスタイルが指定されてたかもしれない。
きちんとソース見てるヒマがなかったから、余裕のあるときにじっくり見ておこう。


こういう、縦中央揃えはbackgroundで処理してばかりだったので、ほんとにこんな単純そうな部分に時間かかってしまいました。けどどうしても背景ではなくて、画像として使いたかったので･･･。
vertical-alignってあんまり画像に指定しないほうが良いのでしょうか。うむむ。