Css Problem für IE8 - Odd Raum zwischen zwei divs in der Kopfzeile erscheint

Question

Sie auf das Thema betrachten:

http://www.caterinaligato.com/

Wir sind nicht das Problem auf IE7 oder einem der Firefox-Versionen wiedergeben können. Mit dem DeveloperTool auf IE8 zeigt es, dass die Polsterung innerhalb der <div id="bannerArea"> ist, aber wir haben versucht #bannerArea * { padding:0; margin:0; display:block; } und das hat nicht geholfen.

Bitte beachten Sie, dass die "Kompatibilitätsansicht" deaktiviert ist.

Wenn jemand einen Rat hat, wäre das großartig!

Answer 1

Beginnen Sie mit dem Hinzufügen von overflow: hidden; zu Ihrer BannerArea-Klasse. Ich bin nicht überzeugt, dass der Star-Hack auch die beste Option ist. Ich würde vorschlagen, das zu entfernen, bis es bewiesen ist, dass Sie es absolut brauchen.

Schließlich stellen Sie sicher, dass Ihr <a> Tag seinen Inhalt alle in einer Zeile hat. IE hatte in der Vergangenheit einen gewissen Schwierigkeitsgrad mit dem korrekten Layout, wenn Anker-Tags Zeilenumbrüche im Markup enthalten und Leerzeichen anzeigen, wo keine vorhanden sein sollten.

Ihre Linie von Markup:

<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div> 

... teilt den Tag in drei Linien, die zu dem Thema beitragen können.

Answer 2

verwenden float: links für "bannerArea" wird es den Leerraum in IE8 reduzieren, aber die Position wird nach rechts bewegen, muss die Position zurücksetzen.

Answer 3

Ich bin mir ziemlich sicher, dass dies wegen Ihres Drop-Down-Menüs passiert. Wenn Sie einen Überlauf hinzufügen: Versteckt "bannerArea" div, dann verschwindet der Leerraum, aber die Platzierung ist ruiniert. Wenn ein Überlauf hinzugefügt wurde: Versteckt in "nv" div, kam das Bild zurück an seinen Platz. Du musst also auf das Drop-Down-Menü achten. Vielleicht können Sie Scrip-Drop-Down anstelle von reinem CSS verwenden?