Inkonsistenz für die Anzeige von liimg // li

Dieses Problem kann einfach die float:left -Eigenschaft reparieren, überprüfen Sie diese Geige

Ссылка

Überprüfen Sie die Fehlerdetails. Behebung von Google Chrome-Kompatibilitätsfehlern in Websites - FAQ

Ссылка

Dies liegt normalerweise an den Standardeinstellungen des Browsers. Um dieses Problem zu beheben, empfehle ich die Verwendung eines normalisierten CSS-Stylesheets oder das Hinzufügen eines eigenen CSS für das Element.

Die Lösung ist zweifach.

1. Wenn Sie das Bild auf display: inline setzen, wird die leere Zeile über dem Bild aufgelöst. Diese leere Zeile ist ein bösartiger Fehler in Chrome . Dieser Fehler macht es effektiv unmöglich, mit einem nichtlinearen Element in einem Standardlistenelement zu arbeiten / zu beginnen. Eine sehr große Sache, wenn Sie mich fragen.

2. Wenn Sie vertical-align: top hinzufügen, wird der Listenmarker oben platziert (wo Sie ihn wahrscheinlich haben möchten). Dadurch wird auch der unerwünschte Platz unter dem Inline-Bild entfernt. Die Platzierung der Listenmarkierung und der Leerraum unter dem Inline-Element sind keine Fehler. Dies ist das erwartete Verhalten.

Dies würde zu dem folgenden (einfachen) Workaround für das OP führen:

Ссылка

Dies wird durch die zwei verschiedenen Ansätze verursacht, die diese beiden Browser beim Rendern eines UL / LI-Elements vornehmen. Ich denke, das ist von Anfang an klar:)

Hier geht es nicht darum, wie sich Inline-Elemente verhalten!

Das Problem hier ist, wie sich List-Style-Eigenschaften in diesen beiden Browsern verhalten!

Wenn Sie das bemerken, ist die Größe der Lücke 18px , was die Standardzeilenhöhe in Chrome ist! Wenn Sie font-size für li erhöhen, wird auch die Größe der Punktmarkierung erhöht, so dass die Entfernung des Bildes vom oberen Rand von div.

Wenn Firefox, diese Punktmarkierung oder die list-style-type -Komponente als absolut positioniertes Element fungieren, so beginnt jedes beliebige Element einfach von der li oberen linken Kante wie erwartet.

Aber in Chrome fungiert diese Punktmarkierung oder die list-style-type -Komponente als Inline-Element und ermöglicht wie jedes andere Inline-Element, dass ein Inline- / Floating-Element in derselben Zeile wie sich selbst steht. So begann Text, der von Natur aus inline ist, neben dem Punkt! Dies gilt auch für Bild, Button, Link, Span oder solche Elemente!

Nun, was Sie als ein Problem empfinden, ist vollkommen normales Verhalten für diese Elemente. Auch wenn zwei Elemente schwebend oder inline sind, wenn sie nicht in die horizontale Breite des übergeordneten Elements gelangen können, fällt das letzte Element in die nächste Zeile! Ähnliches gilt für die Anzeige: Blockelemente, da sie standardmäßig auf einer neuen Zeile beginnen!

In Ihrem Beispiel haben Bilder display:block , daher beginnen sie immer mit einer neuen Zeile! Aber selbst wenn Sie diese Eigenschaft entfernen, sind Standbilder ziemlich groß, um in Eltern zu passen, so wird es fallen & amp; zeige eine Lücke. (Dies ist nur für kleinere Bildschirme, auf größeren Bildschirm ist dies kein Problem für Inline-Block-Bild)

Auch hier ist komisch, dass div in diesem Fall ein Inline-Element ist, auch wenn Sie die Breite über 100% angeben! Daraus schloss ich, dass, wenn das Umbrechen von Inhalten möglich ist, dieses Element in einer neuen Zeile beginnt, aber wenn der Inhalt nicht umgebrochen werden kann, beginnt es in einer neuen Zeile!

Hinweis: Dies basiert auf meinen Beobachtungen & amp; vergangene Erfahrung! Falls jemand Links zu offiziellen Dokumenten für diesen Fall hat, fügen Sie bitte hier ein. Auch Vorschläge zur Verbesserung dieser Antwort sind willkommen.

Ich habe Ihren JSFiddle mit weiteren Beispielen aktualisiert: Ссылка

Probieren Sie diesen Code für Sie HTML