画像間の間隔に影響を与える厳格なDOCTYPE

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

質問

私は厳格なDOCTYPEをXHTMLに切り替えたときに、私は私のイメージ間隔の問題を抱えています。

次のコード - すべてのデフォルトブラウザのパディングを殺すためにYahooのリセットスタイルシートを使用しています - 下の2つの画像間の約4ピクセルのギャップを残したが、私は厳格なDOCTYPEを使用する場合にのみ。これはなぜでしょうか？

これはChromeとFirefoxで唯一の問題です。 IEは、2つの画像間の単一のピクセルを示していない。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>
役に立ちましたか？

解決

以下の修正問題を始めるとピーターの答えを使用して 

img { vertical-align: bottom }

この動作の理由はvertical-alignのデフォルトはテキストdanglyビットが垂れ下がる「線の上」（ETC小文字G、Q、全てがこのベースラインの下ハング）の一部に相当baseline、ということです。

それはこれらのオーバーハングのためのスペースの4PXを残していた部屋を残すためにそう。

意味を成していた希望。

編集：の
元サイトからの視覚補助 altテキスト の
<サブ>（ソース： brightlemon.com ）

他のヒント

ミステリアス画像のギャップについての詳しい情報はここで見つけることができます：

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Firebugのを使用することは、むしろ画像よりも、間隔を起こすDIVであることを示している。

私は、フォントサイズを設定：0;トップのdivとのギャップのために消えます。

（奇妙なことに、そこにある/継承したフォントサイズでなければなりません：0;これは働いなぜわからないリセットmin.cssで体から）

は、厳格な文書型では、画像は、インライン要素となり、テキストのように振る舞います。したがって、あなたはvertical-alignするために、そのdisplay: blockプロパティを変更、またはその表示プロパティを変更する必要がある、またはdisplay:inline-block

一般的なエラーを排除しようとすると、ノー8未満検証エラーを修正することによって、コードパス検証を行いました。

ブラウザが与えられたDOCTYPEでドキュメントを解析できない場合は、

は、一般的に、結果は不定です。

これは、まだ心にあなたを動作しませんが、ここでは、検証コードです： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

ディスプレイ：インラインブロックソリューションは、間違いなく私のために動作しませんでした。

。

垂直-ALIGN：下ソリューションは、しかし、1つの注意点が、作業をした：トップ

：状況に応じて、私が代わりに垂直整列に設定しなければならなかったイメージがありました

の代わりに私のために働い厳しいの緩い基準への切り替え...私は必要なIEのフォーマットを保ったが、FirefoxとChromeで奇数画像間隔を排除します。

https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Modeする

の行を使用します：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top