Das Bildelement img hat in IE6 zusätzlichen Leerraum

Beim Erstellen eines DIV+CSS-Layouts einer Seite kommt es in IE6 sehr häufig zu dem Problem, dass unter dem Bildelement img zusätzlicher Platz vorhanden ist (natürlich passiert das auch manchmal in Firefox). Die Lösung für dieses Problem besteht darin, „je nach Situation zu handeln“. Je nach Ursache sollten unterschiedliche Lösungen verwendet werden. Hier sind die gängigen Methoden zur Behebung des Fehlers mit zusätzlichem Platz unter dem Bildlayout zu Ihrer Information.
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 einen CSS-Code hinzu: #sub img {display:block;}
2. Stellen Sie die vertikale Ausrichtung des Bildes ein
Das heißt, das Problem lässt sich auch lösen, indem Sie die Eigenschaft „Vertikalausrichtung“ des Bildes auf „oben, Text oben, unten, Text unten“ setzen. Fügen Sie beispielsweise in diesem Beispiel einen Satz CSS-Codes hinzu: #sub img {vertical-align:top;}
3. Stellen Sie die Textgröße des übergeordneten Objekts auf 0px ein
Das heißt, fügen Sie in #sub eine Zeile hinzu: 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 ein Teil des Textes von untergeordneten Objekten umschlossen ist, können Sie ihn dennoch anzeigen, indem Sie die Textgröße des untergeordneten Objekts festlegen. Bei der Validierung des CSS wird jedoch eine Fehlermeldung angezeigt, die darauf hinweist, dass der Text zu klein ist.
4. Ändern Sie die Eigenschaften des übergeordneten Objekts
Wenn die Breite und Höhe des übergeordneten Objekts fest sind und die Bildgröße vom übergeordneten Objekt abhängt, können Sie overflow:hidden; festlegen.
zu lösen. Sie können beispielsweise den folgenden Code zu #sub hinzufügen: width:88px;height:31px;overflow:hidden;
5. Legen Sie die schwebenden Eigenschaften des Bildes fest
Fügen Sie in diesem Beispiel eine Zeile CSS-Code hinzu: #sub img {float:left;}
Wenn Sie eine Mischung aus Text und Grafik erzielen möchten, ist diese Methode eine gute Wahl.
Diese Methode sollte hervorgehoben werden. Bei der tatsächlichen Entwicklung kann diese Methode Probleme verursachen. Denn beim Schreiben von Code ist es unvermeidlich, die IDE zu verwenden, um den Code semantischer und hierarchischer zu gestalten und eine Codeeinrückung anzuzeigen, was zwangsläufig dazu führt, dass Beschriftungen und andere Beschriftungen in neuen Zeilen angezeigt werden, wie z. B. der DW-Befehl „Quellformatierung anwenden“. Daher kann uns diese Methode helfen, eine Situation zu verstehen, in der ein BUG auftritt, aber die konkrete Lösung hängt von Ihrer eigenen Erfahrung ab.