1

IE7で困っています。IMG であるヘッダーがあります。その下にメニューを表す div があり、間にスペースを入れずに互いに接続する必要があります。どちらも幅1000pxです。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>

4

7 に答える 7

3

IE Developer Toolbar を試してみてください。これにより、要素で何が起こっているかを調べたり、カバーされている領域の概要を確認したりできます。問題の理解が深まるかもしれません。

于 2008-08-17T19:12:09.193 に答える
0

解決策...表示：ブロック

その質問には、ブラウザのレンダリングモードを知らなければ正しく答えることができませんでした。CSSレンダリングの問題がある場合は、使用しているDoctypeを他の人に伝える必要があります。参照する画像の動作は、クァークズモードと標準モードでは異なります。最小限のテストケースには、問題を再現するための完全なHTMLドキュメントとCSSが含まれている必要があります。時間を無駄にすることなく簡単に答えるのに必要な情報を提供せずに、人々に助けを求めないでください...

于 2008-08-17T20:20:50.193 に答える
0

ソリューション：

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

表示ブロック

于 2008-08-17T19:12:51.407 に答える
0

私はこれにたくさん出くわします。特定の動作を追跡するのではなく、img/div/etc セレクターのパディングとマージンのプロパティを明示的に 0 に設定して健全性チェックを試し、border-style: none border-width: 0px border="0" などを設定します。

IE Dev Toolbar は必需品ですが、単一ピクセルの問題を解決するのに役立つかどうかは不明です。

于 2008-08-17T19:16:03.380 に答える
0

本当の解決策：

#middle { font-size: 0; line-height: 0; }
于 2008-08-18T04:28:37.867 に答える
0

表示ブロックに頼る代わりに、IE7 はホワイトスペースに関して非常に奇妙なことを行うことに注意してください。画像と div の間の空白を削除してみて、どうなるか見てみましょう。

于 2008-08-17T19:23:49.933 に答える
0

CSS リセット ( YUI リセット CSSなど) は、このような場合に最適です。多くの HTML 要素のパディング、マージン、およびその他の表示プロパティをリセットして、表示の違いを最小限に抑えます。

于 2008-08-17T19:25:43.813 に答える