Probleme mit em-Geräten in Chrome

Ich habe ein Problem bei der Verwendung von em-Geräten in Chrome (Version 31.0.1650.63 m).Probleme mit em-Geräten in Chrome

Nach JSFiddle falscher Ausgabe in Chrome erzeugt (im Vergleich zu Firefox oder IE das grüne Feld ist zu groß):

http://jsfiddle.net/rapik/j72aZ/

HTML:

<div class="aaa"> 

    <div class="bbb"> 

    </div> 

</div>

CSS:

.aaa { 
    font-size: 0.5rem; 

    width: 30em; 
    height: 30em; 

    background: red; 
} 

.bbb { 
    font-size: 0.1em; 

    width: 15em; 
    height: 15em; 

    background: green; 
}

Das Problem scheint die Regelzu seindas macht die em nicht 10 mal kleiner. Stattdessen wird em auf einen Mindestwert gesetzt. Es wird keinen Unterschied zwischen und font-size: 0.2em geben, denn beide sind kleiner als dieser magische Mindestwert ....

Ist das ein Fehler oder mache ich etwas falsch?

Dieser spezielle Fall kann gelöst werden, indem alle Werte der "bbb" Klasse mit 10 multipliziert werden. Aber in meinem Fall ist das Ding komplizierter und ich brauche das .

Ich verwende em-Einheiten, um skalierbare Steuerelemente zu erstellen. Meine Steuerelemente haben root div und mehrere untergeordnete Elemente. Die Idee ist, dass alle Werte mit em gesetzt werden und die Laufzeitgröße des ems von der Schriftgröße des Wurzelelements gesteuert wird. Wenn ein Element Schriftgröße definiert hat, hängt es davon ab.

Ich würde über irgendwelche Ideen oder Vorschläge freuen!

Update:

Hier sind Screenshots von verschiedenen Ausgängen Ich spreche von:

enter image description here

Quelle

2014-01-14 Andrej

Kann nicht reproduziert werden. Firefox (26), Chrome (31.0.1650.63 m) und Opera (Presto) rendern die grüne Box als 1/4 der Größe der roten Box. Nur IE9 macht die grüne Box als außergewöhnlich klein. – cimmanon

@cimmanon: Welches Betriebssystem? Ich sehe die 12x12 grüne Box in FF 26, Windows 7. – 412

Ich benutze auch Windows 7. – cimmanon

Da die Standardschriftgröße ist, was die em Größe bezieht sich auf die gewünschte Größe erklären, müssen für die Schriftart, damit die em universell ist.

http://jsfiddle.net/j72aZ/1/

Diese Geige deklariert eine font-size global als 12px und dann behandelt der Browser die em Größe universell zu diesem 12px, im Gegensatz zu der nicht angemeldeten Größe, die der Benutzer ist standardmäßig die Browser.

Diese Seite hat einige gute Material in der Lage sein, Ihnen weiter zu helfen:

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Quelle

2014-01-14 18:46:22 Phlume

Ihre Beschreibung klingt, als ob Sie über rem nicht em sprechen. em hängt von der Schriftgröße des übergeordneten Elements ab. Trotzdem behebt das Beispiel das Problem in meinem Beispiel. Eigentlich ist es genug, um die Schriftgröße der aaa-Klasse in Pixel zu setzen, anstatt sie mit rem zu setzen: http://jsfiddle.net/rapik/j72aZ/5/ Ich werde später weitere Tests machen :-) – Andrej

@Andrej wenn das Lösung löst Ihr Problem, Sie sollten es als akzeptiert markieren. –

Dies wird durch die Tatsache verursacht wird, dass die Mindestschriftgröße Einstellung bei 6px abgerundet (in Chrome 30+) - Sie können keinen niedrigeren Wert wählen. Dies ist nicht problematisch, wenn Sie die Schriftgröße .aaa festlegen, da der berechnete Wert 8px ist. Aber unter Verwendung von font-size: 0.1em; auf .bbb ergibt sich ein berechneter Wert von 0.8px - und da es weniger ist als das Minium, die aktuell verwendete Wert ist 6px:

http://linenwoods.com/images/dev.png

This Fehlerbericht, wenn auch etwas in keinem Zusammenhang, schlug die Mindestschriftgröße mehr, um etwas zu ändern größer, Pressen erfolgt, und änderte es dann wieder auf 6px (obwohl es für Ihr Beispiel nicht zu funktionieren schien.) Es erwähnte auch, dass Sie vor Chrome 27 once mit -webkit-text-size-adjust: none; umgehen konnten (obwohl es ab Version 27 veraltet ist).) This, etwas neuere Frage, sucht eine ähnliche Lösung, aber ist noch nicht beantwortet worden.

Quelle

2014-01-14 19:08:00 412

Das ist etwas! Aber nach der Antwort von Phlume habe ich versucht, die Schriftgröße der '.aaa' mit Pixeln (" 12px "anstelle von" 0.1rem ") zu setzen und es half. Die berechnete Größe von '.bbb' ist jetzt '1px' ... Prüfe diese Geige: http://jsfiddle.net/rapik/j72aZ/5/ – Andrej

@Andrej: Der berechnete Stil von' .bbb' zeigt immer noch 6px für mich (in dieser Geige). – 412

Interessant. Ich habe es erneut überprüft und sehe "1px" für ".bbb" (Chrome 31.0.1650.63 m unter Win Server 2012). Erhalten Sie eine kleine grüne Box (wie 15x15 px) oder eine große? – Andrej

Wie 412 erläutert, ist dies aufgrund der Chrome Mindestschriftgröße von 6px, obwohl ich nur, dass diese Schriftgröße tritt in hinzufügen werden, wenn die Schriftgrößen angegeben werden em oder rem verwenden. Entweder Sie können diese Einschränkung akzeptieren oder Sie können sie umgehen.

Sagen Sie bitte eine Wurzel Schriftgröße von 1px zielen, wenn 1 em = 16px (dh den meisten Browsern), könnte man denken, wie Regeln zu verwenden:

html { font-size: 0.0625em } 
.myElem { height: 20em; font-size: 12em; }

wie ich vorher getan haben (logisch zu sein, dass Ihre Containerhöhe muss abhängig von der Schriftgröße skaliert werden). Auf Chrome scheint es, dass font-size hier wie erwartet gleich 12 * 1px = 12px ist, jedoch wird die Höhe als 20 * 6px = 300px berechnet, wobei die minimale Schriftgröße von 6px verwendet wird, was natürlich unerwünscht ist.

Stattdessen können Sie die folgende Methode verwenden:

html { font-size: calc(1em/16); } 
.myElem { height: 20em; font-size: 12em; }

Ihr Wurzelelement (<html>) Schriftgröße 1px berechnet nach wie vor, wenn 1 em = 16px jedoch, wie es in px ist statt em/rem, die Mindestschriftgröße Regel von 6px kommt nicht ins Spiel, und Höhe wird 20px wie gewünscht gleich.

Quelle

2017-08-07 04:11:15 andrewb

mit calc ist nett! Vielen Dank – Safareli

Antwort

Verwandte Themen