FF und Chromium rendern details/summary unterschiedlich

[Rolf B]

Hallo michaah,

das Problem ist: selbst wenn Du es schaffst, das list-Icon auf dem summary Element zu verschieben, dann wirkt die Verschiebung auch in Chrome und sieht dann dort K... aus.

Ich habe etwas mit summary::marker herumgespielt, Einstellungen wie vertical-align, padding oder margin haben keinen Einfluss. Die Spec will es so.

Ich habe aber auch den Eindruck, dass der Fuchs ein anderes Symbol als Chrome verwendet, das kleiner ist, deshalb seine Spitze höher hat und dass das die Problemursache ist. Es scheint auch (was man sieht, wenn man den Font von ::marker vergrößert), dass der vom Fuchs verwendete Glyph sehr hoch in der Textbox sitzt.

Ich würde Dir als Workaround vorschlagen, die Darstellung des Markers komplett durch eigenes Gewerk zu ersetzen. Chrome unterstützt das erst ab Version 86, d.h. Du musst das mit @supports (selector()) einrahmen. DAS unterstützt Chrome ab Version 83.

@supports (selector(::marker)) {
  summary { list-style: none; }
  summary::before { content: "► "; }
  details[open] summary::before { content: "▼ "; }
}

Ich verwende die Unicodezeichen 25BA ► (black right-pointing pointer) und 25BC ▼ (black down-pointing triangle). Die sehen bei mir im Firefox ganz gut aus. 25B6 ▶ (black right pointing triangle) ist zu wuchtig.

Rolf