Heim  >  Artikel  >  Web-Frontend  >  Das Bildelement „img“ weist bei der IE6-_HTML/Xhtml_Webseitenproduktion ein Problem mit redundantem Leerraum auf

Das Bildelement „img“ weist bei der IE6-_HTML/Xhtml_Webseitenproduktion ein Problem mit redundantem Leerraum auf

WBOY
WBOYOriginal
2016-05-16 16:41:251554Durchsuche

Beim DIV-CSS-Layout auf der Seite kommt es in IE6 absolut häufig zu übermäßigem Leerraum unter dem Bildelement img (natürlich manchmal auch in Firefox). Die Lösung für dieses Problem besteht darin, „zu sehen“. „Handeln“, aus unterschiedlichen Gründen müssen unterschiedliche Lösungen verwendet werden. Hier fassen wir die gängigen Methoden zur Behebung des Fehlers übermäßiger Lücken unter dem Bildlayout als Referenz zusammen.
1. Konvertieren Sie das Bild in ein Objekt auf Blockebene
Das heißt, setzen Sie img auf: display:block;
Fügen Sie in diesem Beispiel eine Reihe von CSS-Codes hinzu: #sub img {display:block; }
2. Legen Sie die vertikale Ausrichtung des Bildes fest
Das heißt, das Festlegen des vertikalen Ausrichtungsattributs des Bildes auf „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 heißt, fügen Sie eine Zeile hinzu #sub: 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. Auch wenn der Textteil von einem Unterobjekt umschlossen ist, kann die Einstellung der Textgröße des Unterobjekts weiterhin angezeigt werden, aber während der CSS-Validierung wird 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; Problem. In diesem Beispiel können Sie beispielsweise den folgenden Code zu #sub hinzufügen: width:88px;height:31px;overflow:hidden;
5 Das heißt, fügen Sie eine Zeile hinzu des CSS-Codes in diesem Beispiel: #sub img {float:left;}
Wenn Sie eine gemischte Anordnung von Bildern und Text erreichen möchten, ist diese Methode eine gute Wahl.
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, die Codeeinrückung über die IDE bereitzustellen, was unweigerlich zu Problemen führt die Beschriftung „Anzeige“ in einer neuen Zeile mit anderen Tags, z. B. dem DW-Befehl „Quellformat anwenden“. 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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn