Ist ein Listenelement mit Aufzählungszeichen immer genau 1,8em eingerückt?

8

Ich habe ein css-only-Dropdown-Menü erstellt. Die Anforderung bestand darin, eine horizontale Leiste mit Elementen zu erstellen, die jeweils ein vertikales Menü anzeigen können. Außerdem sollten diese Elemente kein Tertiärmenü löschen, sondern nur Aufzählungslisten anzeigen. Mein HTML hat drei verschachtelte ul und das Menü funktioniert perfekt in allen modernen Browsern. Es sieht so aus:

Allerdings gefiel mir nicht, wie die dunklere Box hinter dem Link rechts von der Kugel beginnt und sich nicht über die gesamte Menübreite erstreckt, also spielte ich ein bisschen herum und kam schließlich zu dieser Optimierung:

%Vor%

Jetzt sieht der Aufzählungsmenü-Menüpunkt genau so aus, wie ich es wollte:

Und da em relativ zur Schriftgröße ist, funktioniert es unabhängig von der Schriftgröße, wie hier mit einer größeren Schrift dargestellt:

Ich habe dies auf Internet Explorer 8 + 9 + 10 (Entwicklervorschau), Firefox 3 + 7, neueste Chrome, Opera und Safari getestet und es funktioniert wie ein Zauber.

Allerdings verstehe ich einfach nicht, warum genau 1.8em das macht. Wie kommt es, dass jeder Browser die Punkte genau so weit zurückzieht? Ich habe das Internet zu diesem Thema durchsucht, aber ich habe nichts hilfreiches gefunden. Kann ich sicher sein, dass dies in zukünftigen Browsern funktioniert? Sind diese 1.8em im HTML-Standard spezifiziert?

Vielen Dank im Voraus für einen Hinweis!

Bearbeiten:

Zur Antwort von DisgruntledGoat : Es würde nicht funktionieren, wenn ich 1em / -1em oder 20px / -20px verwende. Mit diesem Stil:

%Vor%

Ich bekomme dies (offensichtlich nicht mit der Schriftgröße skalieren) Ergebnis für verschiedene Schriftgrößen:

In ähnlicher Weise ist 1em / -1em ebenfalls deaktiviert und sieht im Bild oben rechts aus, skaliert aber mit der Schriftgröße. Es sieht immer noch aus wie 1.8em ist die magische Distanz aus irgendeinem Grund ...

    
Philip Daubmeier 09.11.2011, 17:16
quelle

4 Antworten

4

Wenn Sie Ihren Code eingegeben haben, haben Sie Ihre ul so eingerichtet, dass sie keinen Rand oder Abstand hat. Sie haben Ihre li jedoch so eingerichtet, dass sie margin-left: 1.8em :

haben %Vor%

Und da ist es.

    
Ryan Kinal 10.11.2011, 15:00
quelle
6

Basierend auf vielen Jahren inkonsistenter Browser - ich würde sagen, Sie können nicht darauf vertrauen, dass sie jemals konsistent sind. Die beste Option ist es, es zwangsweise selbst zu kontrollieren.

Sie können das verwenden, indem Sie gleichzeitig den linken und linken Rand eines li festlegen. zB:

%Vor%

Offenbar verwenden einige (hauptsächlich ältere) Browser Padding und einen gewissen Spielraum - stellen Sie also sicher beides.

    
Taryn East 09.11.2011 18:12
quelle
4

Sie sollten definitiv einen CSS-Reset durchführen und dann die Eigenschaften so einstellen, wie Sie sie brauchen. Vertrauen Sie niemals, dass Browser konsistent sind. Es fügt ein bisschen Kodierung hinzu, aber gleichzeitig beweist es den Code in der Zukunft.

    
wssbck 09.11.2011 19:05
quelle
2

Um die Frage und Ihren Kommentar zu beantworten: Ihre Lösung funktioniert, weil Sie die Auffüllung mit der exakt gleichen Randgröße negieren. Aber der Abstand auf der linken Seite der Liste ist größer mit der größeren Schriftgröße. Sie würden das gleiche Ergebnis mit 1em Padding und -1em Rand oder 20px und -20px bekommen.

Wie ich im Kommentar erwähnt habe, ist der tatsächliche Standardabstand für Listen 40px. Um die Sache noch verwirrender zu machen, berichten sie beim Überprüfen der User-Agent-Stylesheets (in Chrome Dev Tool und Firebug für Firefox) eindeutige CSS-Eigenschaften: -webkit-padding-start bzw. -moz-padding-start .

Ich nehme an, dass diese speziellen Eigenschaften anstelle der regulären Füllung verwendet werden, da Listen in HTML ein Sonderfall sind - sie haben hängenden Aufzählungszeichen / Zahlen, die nicht im Auffüllen zählen.

    
DisgruntledGoat 10.11.2011 13:24
quelle