EM basierte Randbreite Alternative

Question

Also hatte ich diese Idee, EM-Werte für Grenzen auf eine Reihe von Elementen als Variablen zu verwenden, basierend auf einer Eltern-Schriftgröße, würde dies eine Menge redundanten Code für mich reduzieren. Es hat alles gut funktioniert, bis ich merkte, dass einige Browser/Benutzer eine minimale Schriftgröße haben, die man nicht überfahren kann.

Die Mindestwerte in einigen Browsern scheinen von 6px bis 12 zu reichen oder sogar mehr, wenn der Benutzer sie geändert hat. Wenn ich dies nicht für die Schriftgröße verwende, gibt es einen anderen Trick, mit dem ich die Breite eines Rahmens einstellen kann, ohne einen Pixelwert hart zu codieren?

Unten ist ein Beispiel das, was ich Cross-Browser funktionieren würde, hatte gehofft, aber zum Beispiel in Firefox/Cyberfox, für mich gibt es einen 6 Pixel breiten Rand anstelle von 2 px:

 
.parent{ 
 
    font-size:2px; 
 
} 
 
.child{ 
 
    border:1em solid black; 
 
}

<div class="parent"> 
 
<div class="child"> 
 
    Hello world! 
 
</div> 
 
</div>

anforderung: keine sass, keine js, brauchen nur reine css.

Answer 1

Wie jemand anderes in commens erwähnt hat, basiert em Pixeläquivalent auf der übergeordneten Schriftgröße.

Wenn Sie mit Stylesheet-Überschreibungen von Benutzern umgehen, können Sie niemals vollständig garantieren, dass Ihre Stile die des Endbenutzers überschreiben. Sie können jedoch die !important Direktive verwenden und Ihre Regeln so spezifisch wie möglich machen. Sie können schnell über Bord gehen, also testen und verwenden Sie angemessene Standardeinstellungen.

html body .parent{ 
    font-size:2px !important; 
} 
.child{ 
    border:1em solid black; 
} 

Das wird ein Spezifität Spiel sein, aber !important ist Ihr stärkstes Kapital.