0

過去数日間、私は自分が構築しているWebサイトで奇妙な間隔で苦労してきました。もともとはChromeの表示の問題だと思っていましたが、IE8、IE9、Firefox、Safariで再現できました。下位互換性のために古い学校のHTML/CSSを使用しているので、HTML5のIE処理やその他の最先端の更新ではないと言えます。

オンラインの解決策のいくつかは、ヘダッドを浮かせるなど、さまざまなことを試すように私を導きましたが、何も成功していません。私は常に長辺の1つにパディングをしています。

私はこれを問題を再現するために必要不可欠なものの最も少ないものまで取り除き、私の側に見えるパディングのスクリーンショットを含めました。私が逃したものを私に見せてくれる別のセットまたは7つの目が本当にありがたいです。

編集：行の高さがこれの原因であることが判明しましたが、提案に従って画像を上に垂直に配置すると、テキストがdivの上部に残りました。私の感覚では、ヘッダータグはデフォルト値を保持しますが、ヘッダー内のおよびimgタグはそれをオーバーライドします。または、divごとに1つの垂直方向の整列のみを持つことができますか？

次に、CSSで行の高さを折りたたむ方法はありますか？

HTMLコード

<html>  
        <head>
             <title>Test</title>
             <LINK rel="stylesheet" href="test.css">
        </head>
        <body>
             <div id="header">
             <img src="bluespacer.gif" height=125 width=400>
             TEST
             </div>
        </body>
    </html>

CSSコード 

#header {
        font: serif;
        color: blue;
        background-color: gray;
    }

私の出力は以下のようになります

画面キャプチャ

これがbluespacer.gifです。1pxx1px。よく見てください、それはほこりの斑点のようです！

（bluespacer.gif）<---

4

3 に答える 3

5

あなたは間違った場所を見ています。その空白を生成するのはパディングではなく、行の高さです。

画像を垂直方向に揃えてみてください:

#header img {
  vertical-align: bottom;
}

説明: デフォルトのスタイルでは、画像はテキストのベースライン上に配置されます。つまり、下端は、たとえば文字「x」の下端とほぼ一致します。しかし、テキストにはディセンダー ('g' や 'j' など) があるため、周囲のボックスが上に描画され、画像の下に余分なスペースができます。

于 2012-12-18T12:59:28.623 に答える
1

それは奇妙な問題です。あなたはこれを行うことができます。

#header img { line-height: 0; }
于 2012-12-18T14:38:22.623 に答える
0 
#header img {
    display: block;
}
于 2012-12-18T13:06:39.460 に答える