CSS-Problem für IE8 ausgeführt Quirks-Modus

Es gibt einige mysteriöse Auffüllung zwischen zwei Bildern beim Ausführen in IE8 und Quirks-Modus. Diese beiden Bilder dienen als Logo für meine zukünftige Website.CSS-Problem für IE8 ausgeführt Quirks-Modus

Ich habe das Problem in einzelne HTML-Datei, http://etcbc.org/ie_problem/ie.html isoliert.

Es ist zu sagen "Osttoronto Baptistenkirche". Wie Sie sehen können, gibt es derzeit ein Leerzeichen zwischen "toro" und "nto". Was verursacht diesen Platz in IE8 und läuft im Quirks-Modus?

Quelle

2009-06-19 burnt1ce

Sie haben ein größeres Problem in Firefox: Die Bilder sind nicht einmal nebeneinander. –

Ich habe meine Antwort aktualisiert, um sie an Ihren Kommentar anzupassen, jedoch kann ich die neue Lösung nicht selbst testen, da beim Laden der Bilder der Fehler "401 Authorization Required" angezeigt wird. –

Nicht-IE-Browser sind auf dieser Seite noch schlimmer.

Ihre Bilder sind jeweils in einem eigenen <a /> Tags, die einen Stil von "display: block;" haben. Der Anzeigeblock setzt normalerweise jedes Element in eine eigene Zeile (abhängig davon, auf welche anderen Stile sie angewendet werden).

Um dies zu beheben, entfernen Sie den "display: block" -Stil von Ihren Elementen.

<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_1.png" /> 
</a> 
<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_2.png" /> 
</a>

Wenn Sie Ihre Bilder Block Level-Elemente zu sein, die Verwendung schwimmt sie miteinander auszurichten, dann alle (potenziellen) Layout-Probleme, indem schwebende Elemente auf Ihrer Seite verursacht zu beheben, verwenden Sie this clever solution.

Sie sollten die Verwendung von Klassen für Ihre Stile in Betracht ziehen, anstatt sie, wenn möglich, zu inlinern. So wie die Dinge jetzt stehen, werden sie zu einem Wartungs-Albtraum.

Auch, wenn Sie die Kontrolle darüber haben, put a doctype (ich empfehle XHTML 1.0 Transitional. Alle coolen Kinder tun es!) Im HTML Ihrer Seiten, so dass Sie Quirks-Modus nicht einschalten. Wenn du den Quirks-Modus aktivierst, kann das eine Menge Probleme bereiten, besonders wenn du versuchst, "neue" Techniken zu verwenden, um deine Seite für deine Nutzer zu verbessern.

Quelle

2009-06-19 03:27:03

Hallo. Danke für die Antwort. Ich brauche die Bilder als ihren eigenen Link, um Platz für ein erweiterbares Menü zu schaffen. Ich habe die Webseite aktualisiert, um das Menü anzuzeigen und wie es von rechts nach links wachsen kann. Die CSS wird als Inline angezeigt, weil ich HTML/CSS-Code aus der IE-Entwickler-Toolbar kopiert habe. Mein tatsächlicher Code verweist auf CSS-Dateien und verwendet kein Inline-CSS. – burnt1ce

eine gültige DOCTYPE verwenden und sich aus Quirksmode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Quelle

2009-06-19 03:30:38 briscoe

Nur eine schnelle Verbindung mit einigen Dingen, die Quirksmode tut:

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

heißt es dort, dass die horizontale Standard Spielraum für Ein Bild im Quirkmodus ist 3 Pixel. Und dieses Padding wird in CSS ignoriert, also könnte es das sein.

Quelle

2009-10-12 08:51:01

CSS-Problem für IE8 ausgeführt Quirks-Modus

Antwort

Verwandte Themen