IE7：メニュー上のヘッダー

Question

IE7に問題があります。私はIMGであるヘッダーを持っています。その下にはメニューを表すdivがあり、間にスペースを置かずに互いに接続する必要があります。どちらも1000ピクセル幅です。 OperaとFireFoxでは、ヘッダとメニューがお互いにきちんとつながっています。しかし、IE7では、メニューDIVとIMGの間に小さなスペースがあります。 IMGでパディングと余白を明示的に定義しようとしましたが、機能しません。私は前にこの問題を抱えていたので、IE7のように思えます。

私のHTMLコード：

<div id="middle"> 
    <img id="ctl00_headerHolder_headerImage" 
     src="pictures/headers/header_home.jpg" style="border-width:0px;" /> 

    <div id="ctl00_menuPanel" class="menu"> 
     <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> 
     | 
     <a id="ctl00_leden" href="Leden.aspx">Leden</a> 
     | 
     <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> 
     | 
     <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> 
     | 
     <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> 
     | 
     <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a> 
    </div> 
</div> 

Answer 1

は、あなたが要素で何が起こっているかを点検してみましょう、あなたがカバーする領域の輪郭与えるIEの開発者ツールバーを、試してみてください。それはあなたに問題のよりよい理解を与えるかもしれません。

Answer 2

ソリューション：

img { 
padding: 0px; 
margin: 0px; 
display: block; 
} 

表示：私はこれに多くのことを実行し

Answer 3

をブロックします。 border-style：none border-width：0px border = "0"などのように、特定の振る舞いを調べるのではなく、img/div/etcセレクタのパディングと余白プロパティを0に設定することで健全性チェックを試みる。

IE Dev Toolbarは必須ですが、単一ピクセルの問題を理解するのに役立つかどうかはわかりません。

Answer 4

表示ブロックに頼る代わりに、IE7は空白で真剣に奇妙なことをすることに注意してください。イメージとdivの間の空白を削除して、何が起こるかを見てみましょう。

Answer 5

CSSリセット（YUI Reset CSSのような）はこの種のものに最適です。表示の違いを最小限に抑えるために、多くのHTML要素でパディング、余白、その他の表示プロパティをリセットします。

Answer 6

ソリューション...ディスプレイ：質問は、ブラウザをしていたレンダリングモードを知らなくても、正しく答えられませんでしたブロック

。 CSSレンダリングの問題がある場合は、どのようなdoctypeを持っているかを人々に伝える必要があります。標準モードではなく、quirksモードでは参照する画像の動作が異なります。最小限のテストケースでは、問題を再現するための完全なHTML文書とCSSを含める必要があります。 ...彼らが自分の時間を無駄にすることなく、簡単に答えるために必要な情報を与えることなく助けを人に聞かないでください

Answer 7

真の解決策：

#middle { font-size: 0; line-height: 0; }