CSS：画像（IMG）要素の下に2ピクセルの線が表示されますか？

画像の下とナビゲーションバーの上に背景色（この場合は赤色）の線がある理由を誰かが指摘できますか？ FirefoxとChromeの両方に赤い線が表示されるので、意図したとおりにレンダリングされると仮定します。しかし、私は開発者のツールを介して問題を見つけるように見えることはできません。ボーダー、パディング、マージンはすべて0で、困惑しています。CSS：画像（IMG）要素の下に2ピクセルの線が表示されますか？

<body> 
    <div id="main-wrapper"> 
     <header id="main-header"> 
     <img id="title-image" src="http://i.imgur.com/JaYSY.jpg" /> 
     <div id="main-navbar"> 
      STUFF 
     </div> 
     </header> 
    </div> 
    </body>

CSS：ここではストリップダウンコードのバージョン、またはjsfiddle.net/bvss4/9だ

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

#main-wrapper { 
    width: 90%; 
    margin: 0 auto; 
    border: 3px solid #888; 
    margin-top: 20px; 
    background: red; 
} 

#title-image { 
    width: 100%; 
} 

#main-navbar { 
    width: 100%; 
    background: #333333; 
}

bad red line

出典

2012-01-11 Dan7

これを最小限に抑えることはできますか？現時点では、特定の問題が特定できない限り、これを「あまりにもローカライズ」しています。 –

こんにちは、私はここで最小限のバージョンで更新されました：http://jsfiddle.net/bvss4/1/。ありがとう。 – Dan7

最小限のもの：http://jsfiddle.net/bvss4/9/質問を反映させて更新してください。 –

は、画像のCSSにvertical-align: bottomを設定します。

理由は画像がテキストとインラインで表示されるためです。これは、y,gなどの文字がベースラインを下回ってスペースが発生する場合に、ラインの下の小さなスペースを許可する必要があることを意味します。

vertical-alignをbottomに設定すると、画像がテキストの下部に揃うように移動し、この問題を回避します。

注意しなければならない例外が1つあります。画像の高さが1行のテキストよりも低い場合は、その要素に空白を残して、含まれている要素にline-heightが動作します。

出典

2012-01-11 23:48:44

動作しますが、理想的な回答にはローカライズされています。 –

@Kolink - 私は同意しません。私はこれまで何度も実行してきました。コンテナを埋めるインライン要素がその下にギャップを残しています。解決法は常に 'display：block'のいずれかであるか、'
'でそれを追跡するか、またはブロック要素で囲みます。 – gilly3

私はちょうどhttp://jsfiddle.net/nUacj/でそれを試してみました - 私は、垂直整列設定：真ん中の代わりに、ベースラインをこの問題を解決しました。これはあなたにとって実行可能な解決策ですか、それともベースラインにする必要がありますか？あなたの#title-imageそれを修正します

#title-image { 
    width: 100%; 
    display:block; 
}

JSFiddle here

出典

2012-01-11 23:44:46 ClarkeyBoy

+1。ええ、これは正確に過度の包括的なCSSのリセットが悪い理由です： – Ryan

それはうまくいく、そうブレットのソリューションを行います。「垂直方向の整列」を省略しても、これは解決しません。しかし、まだ素晴らしい回避策。ありがとうClarkeyBoy！ – Dan7

にdisplay:blockを追加

出典

2012-01-11 23:50:00

CSS：画像（IMG）要素の下に2ピクセルの線が表示されますか？

答えて

関連する問題