IE7:Kopfzeile über dem Menü

StackOverflow https://stackoverflow.com/questions/13851

  •  08-06-2019
  •  | 
  •  

Frage

Ich habe Probleme mit IE7.Ich habe einen Header, der ein IMG ist.Darunter habe ich ein Div, das ein Menü darstellt. Sie müssen ohne Leerzeichen dazwischen aneinander angehängt werden.Beide sind 1000 Pixel breit.In Opera und FireFox sind die Kopfzeile und das Menü sauber aneinander angehängt.Allerdings gibt es im IE7 einen kleinen Abstand zwischen dem Menü DIV und dem IMG.Ich habe versucht, den Abstand und den Rand im IMG explizit zu definieren, aber es funktioniert nicht.Ich hatte dieses Problem schon einmal, es scheint also eine Eigenart des IE7 zu sein.

Mein HTML-Code:

<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>

War es hilfreich?

Lösung

Probieren Sie die IE Developer Toolbar aus, mit der Sie prüfen können, was mit den Elementen passiert, und die Ihnen einen Überblick über die abgedeckten Bereiche gibt.Es könnte Ihnen helfen, das Problem besser zu verstehen.

Andere Tipps

Die Lösung: 

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

Anzeige:Block

Ich stoße oft darauf.Anstatt das spezifische Verhalten aufzuspüren, versuchen Sie es mit einer Plausibilitätsprüfung, indem Sie die Padding- und Margin-Eigenschaften für img/div/etc-Selektoren explizit auf 0 setzen und border-style festlegen:keine Randbreite:0px border="0" usw.

Die IE Dev Toolbar ist ein Muss, aber ob sie Ihnen bei der Lösung von Einzelpixelproblemen hilft, ist unwahrscheinlich.

Beachten Sie, dass IE7 einige wirklich merkwürdige Dinge mit Leerzeichen macht, anstatt auf den Anzeigeblock zurückzugreifen.Versuchen Sie, den Leerraum zwischen dem Bild und dem Div zu entfernen, und sehen Sie, was passiert.

CSS-Resets (wie die YUI CSS zurücksetzen) eignen sich hervorragend für solche Dinge.Sie setzen Abstände, Ränder und andere Anzeigeeigenschaften für viele HTML-Elemente zurück, um die Anzeigeunterschiede zu minimieren.

Die Lösung...Anzeige:Block

Diese Frage konnte nicht richtig beantwortet werden, ohne den Rendering-Modus zu kennen, in dem sich der Browser befand.Sie müssen den Leuten sagen, welchen Dokumenttyp Sie haben, wenn Sie Probleme mit der CSS-Darstellung haben.Das Bildverhalten, auf das Sie sich beziehen, unterscheidet sich im Quirks-Modus vom Standardmodus.Ein minimaler Testfall muss ein vollständiges HTML-Dokument und das CSS umfassen, um das Problem zu reproduzieren.Bitten Sie niemanden um Hilfe, ohne ihm die Informationen zu geben, die er braucht, um einfach und ohne Zeitverschwendung antworten zu können ...

Die echte Lösung:

#middle { font-size: 0; line-height: 0; }
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top