sacnoha's Stories

IE6、IE7で画像にpタグのマージンが表示されるのを回避する方法

  • 2011.02.23
  • css
NO IMAGE

コーディングをしていてめっけたのでメモ。
根本的な解決方法がわからなくって、これが解決策ではないような気がするけど、他に方法が見つからなかった〜。

<div>
<img src="/sample/slideshow/images/photo2.jpg" alt="" />
<p><strong>右の画像に&lt;p&gt;のマージンが反映されます</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