Vertikalen Abstand zwischen Bilder in Firefox

March 11

Wenn Sie Ihre Websites mit Tabellen entwerfen, möglicherweise Firefox einen dünnen Raum unterhalb der Bilder angezeigt. Wenn Ihre Website Bilder vertikal gestapelt hat, wird dieser Raum wie eine Pause zwischen den Bildern aussehen. Dieser Effekt ist das Ergebnis eines Fehlers. Sie haben mehrere Möglichkeiten für den Umgang mit ihm, einschließlich der Verwendung einer anderen Doctype das Bildermachen als Blöcke oder Basteln mit ihre vertikale Ausrichtung angezeigt.

Die Geschichte: Tabellen und CSS

In den späten 1990ern verwendet Webseiten oft Tabellen zum Anordnen von deren Anordnung. Die Verwendung von Cascading Style Sheets (CSS) ersetzt diese Technik an der Wende des Jahrhunderts, und seitdem haben Browser ihre Standards angepasst CSS--manchmal auf Kosten der Tabellen verschoben. Tabellenbasierten Websites, die einmal ihre Bilder korrekt angezeigt, jetzt Mays Störungen, wie z. B. unerwünschte Stehhöhe unterhalb Bilder zeigen.

Die Ursache: Anderes Basislinienausrichtung

Die vertikal-Raum Störung geschieht, weil CSS Konventionen Bilder auf eine textuelle Grundlinie legen, die die blauen Linien auf einem Blatt Papier liniert vergleichbar ist. Wenn Sie auf linierte Papier schreiben, schreiben Sie die meisten Buchstaben über der Linie, aber einige Buchstaben--wie "y" und "g" Unterlängen haben, die unter es sinken. CSS passt auf das mögliche Vorhandensein von Buchstaben mit Unterlängen, selbst wenn Sie nur ein Bild in der Tabellenblock haben.

Verändernden Doctypes: FirefoxS "fast Standards" Modus

Firefox wird automatisch dieses Problem beheben, wenn es kommt "fast Normen" Modus. Um diesen Modus auszulösen, müssen Sie Doctype auf eines der folgenden ändern:

"-//W3C//DTD XHTML 1.0 Transitional / / EN""-//W3C//DTD XHTML 1.0 Frameset / / EN""-//W3C//DTD HTML 4.01 Transitional / / EN""-//W3C//DTD HTML 4.01 Frameset / / EN"

Die Doctype gehört am Anfang des Codes. Eine vollständige Doctype-Deklaration kann zum Beispiel lauten:

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / EN" >

Beachten Sie, dass bei Verwendung von HTML 4.01 Sie auch eine System-ID deklarieren müssen. In diesem Fall würde eine vollständige Deklaration aussehen:

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

Display Block Fix

Standardmäßig sind die Bilder innerhalb einer Tabelle Inline angezeigt. Wenn Sie diese als Block anzeigen ändern, dann werden Sie das Problem zu beheben. Sie erreichen dies durch manuelles Ändern des Bildausschnitts Darstellungsstil wie folgt:

< Img Image.gif "Stil =" display: block; " >

Wenn Sie mehrere Bilder haben, können Sie auch dies in der CSS-Datei behandeln durch Hinzufügen der folgenden:

TD Img {display: block;}

Mit diesem wenig Code wird jedes Bild in einer Tabelle automatisch als Block angezeigt. Dadurch sparen Sie viel Zeit.

Vertikale Ausrichtung Fix

Sollten Sie das Problem zu lösen, indem Ihr Bild am unteren Rand der Tabellenblock ausrichten. Sie erreichen dies durch das einzelne Bild Anzeigestil ändern wie folgt:

< Img Image.gif "Stil =" Vertical-align: bottom; " >

Alternativ können Sie das Element gestalten, indem Sie Ihr Stylesheet dieser Zeile hinzufügen.

TD Img {Vertical-align: bottom;}

Beachten Sie, dass dieser Ansatz ein seltsames Verhalten verursachen kann. Überprüfen Sie nach der Benutzung Ihre Website in allen Browsern. Wenn nicht, verwenden Sie eine der anderen Lösungen.