6 Möglichkeiten, Lücken unter CSS-Bildern zu schließen

Beim p+CSS-Schriftsatz auf der Seite kommt es in IE6 absolut häufig zu übermäßigem Leerraum unter dem Bildelement img (natürlich manchmal auch in Firefox). „Handeln Sie entsprechend den Umständen“. Aus unterschiedlichen Gründen sollten unterschiedliche Lösungen verwendet werden. Hier fassen wir direkt die gängigen Methoden zur Behebung des Fehlers übermäßiger Lücken unter dem Bildlayout zusammen. In diesem Artikel werden hauptsächlich 6 Lösungen für die Lücken unter CSS-Bildern vorgestellt. Freunde in Ich kann mich bei Bedarf darauf beziehen, ich hoffe, es kann jedem helfen.

1. Konvertieren Sie das Bild in ein Objekt auf Blockebene

Das heißt, stellen Sie das Bild auf:

Anzeige: Block

Gruppe hinzufügen in diesem Beispiel CSS-Code: #sub img {display:block;}

Ungültig für IE6/7

2 Legen Sie die vertikale Ausrichtung des Bildes fest

, d. h. Das Festlegen des Vertical-Align-Attributs des Bildes „oben, Text oben, unten, Text unten“ kann ebenfalls gelöst werden. Fügen Sie in diesem Beispiel beispielsweise eine Reihe von CSS-Codes hinzu: #sub img {vertical-align:top;}

3 Setzen Sie die Textgröße des übergeordneten Objekts auf 0px

Das Das heißt, fügen Sie es in #sub hinzu. Eine Zeile: font-size:0;

kann das Problem lösen. Dies führte jedoch auch zu einem neuen Problem: Der Text im übergeordneten Objekt konnte nicht angezeigt werden. Selbst wenn der Textteil von einem Unterobjekt umschlossen ist, kann er durch Festlegen der Textgröße des Unterobjekts weiterhin angezeigt werden. Bei der CSS-Validierung wird jedoch eine Fehlermeldung angezeigt, dass der Text zu klein ist.

4. Ändern Sie die Attribute des übergeordneten Objekts

Wenn die Breite und Höhe des übergeordneten Objekts festgelegt sind und die Bildgröße vom übergeordneten Objekt abhängt, können Sie Folgendes festlegen: overflow:hidden; um das Problem zu lösen.

In diesem Beispiel können Sie den folgenden Code zu #sub hinzufügen: width:88px;height:31px;overflow:hidden;

5. Legen Sie das Floating-Attribut des Bildes fest

Das heißt, fügen Sie in diesem Beispiel eine Zeile CSS-Code hinzu: #sub img {float:left;}

Wenn Sie eine gemischte Anordnung von Bildern und Text erreichen möchten, ist diese Methode eine gute Wahl.

6. Entfernen Sie das Leerzeichen zwischen dem Bild-Tag und dem letzten schließenden Tag des übergeordneten Objekts.

Diese Methode sollte in der tatsächlichen Entwicklung hervorgehoben werden, denn um den Code beim Schreiben von Code semantischer und klarer zu gestalten, ist es unvermeidlich, eine Code-Einrückungsanzeige über die IDE bereitzustellen ist unvermeidlich Dies führt dazu, dass die Beschriftung und andere Beschriftungen in neuen Zeilen angezeigt werden, z. B. der Befehl „Quellformat anwenden“ von DW. Daher kann diese Methode uns helfen, eine Situation zu verstehen, in der ein Fehler auftritt. Die spezifische Lösung muss von jedem gelöst werden.

Verwandte Empfehlungen:

So lösen Sie die Lücke zwischen der Ober- und Unterseite des IMG-Tags

Es gibt eine Lücke zwischen div+css ie6 Bildern Problem_html/css_WEB-ITnose

CSS-Studiennotizen – Lösung der Lücke zwischen dem Bild img und dem übergeordneten Element div_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt von6 Möglichkeiten, Lücken unter CSS-Bildern zu schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!