css - HTML: is input box default/calculated content height different across browsers -


मान लें कि मेरे पास निम्न कोड है

 । उपयोगकर्ता नाम {font-size: 30px; पैडिंग-टॉप: 8px; पैडिंग-नीचे: 8 पीएक्स; सीमा: 2px ठोस # E0E0E0; }  
  & lt; इनपुट वर्ग = "उपयोगकर्ता नाम" प्रकार = "पाठ" />  

पर लाइव डेमो देखें

मुझे लगता है कि कुल ऊंचाई = सामग्री की ऊंचाई + पैडिंग टॉप + पैडिंग-नीचे + (सीमा -विधि x 2)।

हालांकि, जब ऊंचाई संपत्ति को एक मान असाइन नहीं किया जाता है, तो यह ब्राउज़र की तुलना की गई सामग्री की ऊँचाई की तरह लगता है ब्राउज़र। जैसे कि यह फ़ॉन्ट-आकार + फ़ॉन्ट आकार के आनुपातिक पिक्सल की कुछ मनमानी संख्या का परिणाम था।

विभिन्न ब्राउज़रों सामग्री ऊंचाई के लिए निम्न मान हैं:

  • क्रोम 38: 34 पीएक्स
  • फ़ायरफ़ॉक्स 33: 35 पीएक्स
  • आईई 11: 34.5 पीएक्स
  • आईई 8: 35 पीएक्स
  • नोट: मुझे प्रत्येक ब्राउज़र के अंतर्निहित डेवलपर टूल से मूल्य मिल गया है

    क्या ब्राउज़र से ब्राउज़र के स्थिर मूल्य प्राप्त करने का कोई तरीका है ऊंचाई संपत्ति और न ही लाइन-ऊंचाई संपत्ति ?

    नहीं, आपके द्वारा उल्लिखित विधियों के अलावा यह करने का कोई तरीका नहीं है। यहां तक ​​कि सीएसएस रिसेट / नॉर्मलाइज़र्स इन पर्दे के पीछे के तरीकों का इस्तेमाल करेंगे।

    यदि क्रॉस ब्राउजर सामग्री हाइट्स आपके लिए बहुत महत्वपूर्ण हैं, तो मैं छवियों का उपयोग करने का सुझाव देता हूं।


    Comments

    Popular posts from this blog

    c# - SignalR: "Protocol error: Unknown transport." when navigating to hub -

    Camel ProducerTemplate possible memory leak -

    javascript - Adhering to a max length setting with jshint -