क्रोम और फ़ायरफ़ॉक्स

Question

के बीच अलग-अलग रेंडर रत्नों ने मुझे क्रोम और फ़ायरफ़ॉक्स में प्रस्तुत करने की तुलना करने की तुलना में रिम ​​का उपयोग करके मामूली समस्या देखी है।

निम्नलिखित सीएसएस का उपयोग करना:

html { 
    font-size: 62.5%; 
} 

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

परिणाम थोड़ा अलग है जब गाया हैं, फायरफॉक्स बॉक्स कम क्रोम की तुलना में यह लग रहा है पता चलता है:

वहाँ कुछ मैं क्या कर सकता है ऐसा होने से रोकने के लिए?

यहाँ एक कलम है: http://codepen.io/abbasinho/pen/WbJWNq

Answer 1

रेम के बाद से अपने html का फ़ॉन्ट आकार का उपयोग करते हुए गणना की जाती है आप ब्राउज़रों में वर्दी फ़ॉन्ट आकार की आवश्यकता है (है कि शरीर का फ़ॉन्ट आकार 5px है तो 20rem 100px हो जाएगा)।

कोड कलम में फ़ॉन्ट आकार को संशोधित करने का प्रयास करें।

Add-

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

सब कुछ अब इसी तरह काम करना चाहिए।

Answer 2

यह निश्चित रूप से होता है क्योंकि आपके ब्राउज़र में अलग-अलग फ़ॉन्ट-आकार सेटिंग्स होती हैं, आप आसानी से इसे अपने कोडपेन के this fork से देख सकते हैं।

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

तो सतर्क कर दिया मूल्यों क्रोम और फ़ायरफ़ॉक्स में विभिन्न आप निश्चित रूप से अपने font-size सेटिंग देखनी चाहिए रहे हैं।

Answer 3

ठीक वही "मुद्दा" था। मेरे मामले में इसे विंडोज 10 विस्तारित फ़ॉन्ट और आइटम आकार के साथ करना पड़ा।

फ़ायरफ़ॉक्स इसे ध्यान में रखता है जो 125% पर सेट होने पर 1.25 गुना बढ़ता है। जबकि क्रोम नहीं करता है।

तो फ़ायरफ़ॉक्स में 14 पीएक्स बन जाता है: मॉनिटर पर 17.5 पीएक्स और क्रोम में यह 14 पीएक्स पर रहता है।