2009-06-04 9 views
4

私の目標は、私が働いているこのページのXHTML 1.0厳格なDOCTYPEを使用することですが、私はいくつかの奇妙な設計上の問題に実行しているよ。..不要な間隔は1.0厳格な

私は以下の持っていますコード:私は厳密1.0に設定DOCTYPEでページをロードすると

<div><img src="photos/someimage.jpg" alt="Title" /></div> 

、間隔のほとんど隙間がDIV内に、画像の下に追加されています。私は、問題のこの種の一般的な原因と思われるコード内の空白/改行をすべて削除しました.. DOCTYPEを1.0 Transitionalに変更すると、スペースがなくなり、ページが正しく表示されます。

まだ1.0 Strictを使用している間にこの問題を回避する方法について知っていますか?

ありがとうございました!

答えて

20

http://www.schoonzie.com/rogue-padding-below-images

を試してみてください。これは、イメージがテキストのベースライン上に配置され、ベースラインの下にg、jまたはqなどのディセンダ文字のためのスペースがもう1つあるためです。

厳密なモードでは、もちろんimg {display:block}と明示的に言わない限り、コンテナをイメージの周りにしっかりと収めることができません。

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

他の主な選択は、画像をインラインで残し、行ボックスに対する画像の垂直方向の配置を変更しています。たとえば、次のように試みることができる:

div img {vertical-align: bottom;} 
+0

垂直整列:下。素晴らしい仕事!修正と素晴らしい記述に感謝します。 – bloudermilk

1

は、画像をインラインで表示されている場合、それはその下にわずかなスペースを残し、この

<div style="font-size: 0px;"><img src="photos/someimage.jpg" alt="Title" /></div> 
関連する問題