Chrome ve Firefox

Question

arasında farklı şekilde işlenen Rems'ler, Chrome ve Firefox'ta nasıl işlediklerinin karşılaştırılması söz konusu olduğunda, rems kullanarak küçük bir sorun farkettim. Aşağıdaki CSS kullanarak

:

html { 
    font-size: 62.5%; 
} 

.rem-test { 
    width: 50%; 
    height: 20rem; 
    background: red; 
} 

sonuç işlenmiş zaman biraz farklıdır, Firefox Chrome'da göründüğünden daha kutu kısa gösterir: Yapabileceğim bir şey

var mı Bunu durdurmak için?

İşte, bir kalem: rem yana http://codepen.io/abbasinho/pen/WbJWNq

Answer 1

html'nizin yazı tipi boyutunu kullanılarak hesaplanır Eğer tarayıcılar arasında üniforma yazı tipi boyutlarını olması gerekir (yani vücudun yazı tipi boyutunu daha sonra 20rem 100px olacak 5px olduğunu).

Kod kaleminde yazı tipi boyutunu değiştirmeyi eklemeyi deneyin.

Add-

body, html { 
    font-size:15px; 
} 

Şimdi herşey benzer çalışmalıdır.

Answer 2

Bu, çoğu durumda tarayıcınızın farklı yazı tipi boyut ayarlarına sahip olması nedeniyle gerçekleşir, kodunuzu this fork ile kolayca kontrol edebilirsiniz. uyarılmak değerler kesinlikle font-size ayarlarını kontrol etmelidir krom ve ateş farklıysa

alert(document.querySelectorAll('.rem-test').item(0).scrollHeight); 

. Aynı "sorun" ifadesinin aynısı olsaydı,

Answer 3

. Benim durumumda, Windows 10 genişletilmiş yazı tipi ve öğe boyutu ile ilgisi vardı.

Firefox bunu dikkate alır ve her şey% 125'e ayarlandığında 1,25 kat büyütülen her şeyi gösterir. Krom olmasa da.

Firefox'taki 14px, monitörde ve kromda 17,5 piksel olacak şekilde 14 pikselde kalıyor.