Ich habe versucht, display: run-in zu verwenden, um eine semantische und gut aussehende Metadaten-Name-Wert-Liste zu erstellen, wie folgt:
Das erwartete Ergebnis ist
Thema: Eine Frage
Von: Herr Smith
Zeit: 2013-08-05
Sie können es live ansehen. (Tatsächlich wurde mir die Idee, display: run-in zu verwenden, von Ian Hickson gegeben, nachdem ich angefangen habe, über das di -Element von XHTML 2.0 zu nageln. Eine Alternative ist float , aber das bringt eine Reihe von Schwierigkeiten mit sich. )
Bis vor kurzem funktionierte das wunderbar in jedem modernen Browser außer Firefox (dh es funktionierte perfekt in Internet Explorer, Google Chrome, Opera und Safari (glaube ich)). Aber erst kürzlich habe ich festgestellt, dass es in Google Chrome nicht mehr funktioniert.
Frage: Hat Google Chrome die Unterstützung für display: run-in fallen gelassen? Gibt es eine Alternative, die genauso funktioniert?
Mir ist nicht bekannt, dass Chrome die Unterstützung von display:run-in geändert hat, aber die Einstellung scheint mir immer ungeliebt zu sein.
Hixie wurde konsequent gegen <di> abgelehnt und ich verstehe warum. HTML ist eine semantische Sprache und die Semantik wird vollständig durch dl/dt/dd definiert. Die einzigen praktischen Probleme sind die Präsentation, und das macht sie zu einem CSS-Problem, nicht zu einem HTML-Problem.
Leider scheint der aktuelle Zustand von CSS dem Job nicht zu entsprechen. Für dl / dt / dd und für viele ähnliche Probleme benötigen wir wirklich einen Mechanismus, um Gruppen von Elementen in ein Pseudo-Element einzubinden, das dann die Rolle des <di> übernehmen könnte.
Offensichtlich gibt es keine aktuelle Einstellung, die tut, was display:run-in tun soll. Allerdings können Sie in Ihrem speziellen Testfall mit diesem CSS den gleichen Effekt erzielen:
Ich würde gerne einen anderen, expliziteren Lösungsansatz anbieten. Eine, die auf einen allgemeineren Fall erweitert werden kann, in dem display:run-in behavior fehlt.
I.e. Ich verwende h4 - & gt; p fließende Übergänge, um eine schön formatierte Liste von Elementeigenschaften zu erstellen:
Hier verwende ich den CSS-Selektor "Sofortige Geschwister" ( + ), um p -Elemente auszuwählen, denen unmittelbar h4 -Elemente vorausgehen. Wenn auf h4 ein anderes Element folgt, wird es nach dem normalen Ablauf angezeigt.
Ein alternativer Selektor ~ wählt nicht nur eins, sondern alle Elemente dieses Typs aus, was normalerweise nicht vom Run-In-Verhalten erwartet wird, und erstreckt sich auch auf alle Tags desselben Typs im aktuellen Bereich, unabhängig von den andere gemischte Tags, die das Layout komplett durchbrechen könnten.
Tags und Links css