IE6、IE7で画像にpタグのマージンが表示されるのを回避する方法
コーディングをしていてめっけたのでメモ。
根本的な解決方法がわからなくって、これが解決策ではないような気がするけど、他に方法が見つからなかった〜。
<div> <img src="/sample/slideshow/images/photo2.jpg" alt="" /> <p><strong>右の画像に<p>のマージンが反映されます</strong><br /> IE6、IE7で見ると、画像の下にマージンが表示されますもんで困るときもある。</p> </div>
という状態で、画像が枠線ぴったりにはまるようにしたいのに、IE6、IE7だと、<p>に設定したマージンが画像に表示されてしまう模様。<p>の外なのになななななななんでー!
⇒ サンプル
line-height:normal;とか、vertical-align:bottom;とかで解決できる・・・と思ったらできなかった。
マージンが邪魔臭いというわけで、
p{ margin: 0; padding: 0 0 3em 0;
と変更して解決。なんかむりやりな気がするけど。
⇒ サンプル2