एंकर टैग का उपयोग कर फ़ायरफ़ॉक्स अजीब पैडिंग - सीएसएस, फ़ायरफ़ॉक्स

मैं बैकग्राउंड जोड़कर एक एंकर टैग बटन बनाने की कोशिश कर रहा हूं, और जब यह क्रोम और सफारी में ठीक दिखता है, तो फ़ायरफ़ॉक्स 15.0.1 एक बग लगता है।

उदाहरण के लिए, http://jsfiddle.net/cqVjj/3/ दिखाता है कि पाठ लंबवत केंद्रित नहीं है। मैंने पैडिंग, चौड़ाई या ऊँचाई को भी निर्दिष्ट नहीं किया है, लेकिन मुझे क्रोम के समान परिणाम की उम्मीद है। फ़ायरफ़ॉक्स मुझे सबसे नीचे दिखता है।

कोई समाधान?

क्रोम 21.0.1 क्रोम

फ़ायरफ़ॉक्स 15.0.1 फ़ायरफ़ॉक्स

उत्तर:

जवाब के लिए 0 № 1

सरल तय:

आप गायब हैं line-height विशेषता। इसका मूल्य उसी के समान होना चाहिए font-size:

line-height: 34px;

मैंने आपका jsfiddle अद्यतन किया: http://jsfiddle.net/cqVjj/4/


जवाब के लिए 0 № 2

यह ब्राउज़र के माध्यम से संगत नहीं है। मेरा सुझाव है कि आप पैडिंग के साथ रिक्ति को संतुलित करें। यहाँ देखें उदाहरण:

http://jsfiddle.net/exzRT/

"एरियल" जैसे किसी सेन्स-सेरिफ़ फ़ॉन्ट को फ़ॉन्ट को बदलने में काफी मदद मिलती है।


जवाब के लिए 0 № 3

प्रतिपादन सटीक फोंट पर निर्भर करेगाब्राउज़र का उपयोग कर रहे हैं और सटीक चढ़ाई और वंश मेट्रिक्स पर वे उन फोंट के लिए उपयोग करने का निर्णय लेते हैं। ध्यान दें कि आप उन्हें अपने फिडेल में एक ही फ़ॉन्ट परिवार का उपयोग करने के लिए भी नहीं कह रहे हैं।

लेकिन यहां तक ​​कि पिछले, CSS2.1 को इस मामले पर क्या कहना है (से) http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced ):

The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
the maximum ascender and descender of the font.

मुझे संदेह है कि जिन ब्राउज़रों को आप देख रहे हैं, वे वास्तव में इनलाइन के सामग्री क्षेत्र की विभिन्न परिभाषाओं का उपयोग कर रहे हैं।


संबंधित सवाल
सबसे लोकप्रिय