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 ...
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
:
Und da ist es.
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:
Offenbar verwenden einige (hauptsächlich ältere) Browser Padding und einen gewissen Spielraum - stellen Sie also sicher beides.
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.
Tags und Links css cross-browser browser fonts html-rendering