0

私は過去数時間これに取り組んできました、そして私はあきらめます。これはわかりません。

画像（ヘッダーロゴ）とそれに続くナビゲーションバーがあります。画像のすぐ下に2〜3ピクセルのスペースがあります。外部から参照されるCSSのすべてのビットを体系的に削除し、問題を修正するためにインラインCSSを追加しました。これが私が今持っているものです：

<html lang='en'>
        <head>
            <meta charset='utf-8' />
            <title>Sci-fi's Big Mistake</title>
        </head>

        <body style='margin:0px; padding:0px; border:1px solid green;'>


            <img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
            <span style='border:1px solid blue;margin:0px; padding:0px; '>text</span>
            <ul id='menu' class='gold' style='margin:0px; padding:0px; border:1px solid red;'>
                <li><a href='#'>Home</a></li>
                <li class='active'><a href='#'>About</a></li>
                <li><a href='#'>Services</a></li>
                <li><a href='#'>Products</a></li>
                <li><a href='#'>Contact</a></li>
                </ul>




Shouldn't have cancelled this.
</body></html>

これがページのスクリーンショットであり、私のシステムで見ているものです（Win、xp、IE8とFF 13で同じ）

http://picturepush.com/public/8737985

4

4 に答える 4

2

そこにあなたはそれを手に入れました。

http://jsfiddle.net/dennym/XBdfk/

を削除し、画像<br>に追加しましたdisplay:block。スペースがなくなりました。

問題は、<br>それが削除できない最小マージンを持っていることでした...私は推測します。また、画像にを追加する必要があるdisplay:blockため、テキストは下部に表示されます。

（引用符の小さなエラーも削除しました）

于 2012-07-16T13:54:07.593 に答える
1

画像タグコードが正しくないため、alt属性を閉じなかったため、スタイルが有効にならず、二重引用符を使用する必要があります

<img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>

を削除して画像<br>に設定することもできますdisplay:block;

于 2012-07-16T03:53:04.157 に答える
0

Mac OS X/Chromeを使用している私にはギャップはありません。私の推測では、ブラウザは1以外のスパンに行の高さを設定しています。

リセットスタイルシート（http://meyerweb.com/eric/tools/css/reset/ ）を使用してみてください。また、 Firebugを使用すると、要素にカーソルを合わせて、要素のサイズを確認し、パディングがどこから来ているかを正確に特定できます。

于 2012-07-16T03:25:44.150 に答える
0

If understand you correctly, the problem is caused by the fact that images are not only inline elements like text, but are also considered to be 'text'. Text is written with a baseline. Most letters align on this baseline, but some, like j, g and y not. So some pixels of space are included at the bottom, below the baseline when a text is rendered. You can put this off by adding

line-height:0px;

to your image tag.

Another bizarre result of this image-equals-letter idea is that images that should be aligned side by side show a gap. Indeed: there are spaces between letters! You can solve this by adding to that sme image tag:

font-size:0px;

Another way to solve that problem you mention would be to make that header image the background image of a div with the same dimensions. Div's are only containers and have no font-like properties.

Hope this helps!

于 2014-02-13T11:14:56.710 に答える