फ़ायरफ़ॉक्स में स्पैन ऊंचाई

Question

सीएसएस का उपयोग करके, मैं फ़ायरफ़ॉक्स में एक स्पैन टैग की ऊंचाई निर्दिष्ट करने की कोशिश कर रहा हूं, लेकिन यह इसे स्वीकार नहीं कर रहा है (आईई करता है, काफी मज़ेदार है)।

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

मैंने डीआईवी के लिए

display: inline

की सीएसएस शैली विशेषता को सेट करने का प्रयास किया, लेकिन फ़ायरफ़ॉक्स फिर भी स्पैन व्यवहार पर वापस लौटता है, और एक बार फिर ऊंचाई विशेषता को अनदेखा करता है।

Answer 1

<style> 
#div1 { float:left; height:20px; width:20px; } 
#div2 { float:left; height:30px; width:30px } 
</style> 

<div id="div1">FirstDiv</div> 
<div id="div2">SecondDiv</div> 

जो कुछ के लिए कंटेनर के रूप में div's 1 और 2 उनके लिए फिट होने के लिए पर्याप्त है, यह ठीक होना चाहिए।

Answer 2

चूंकि आप इसे इनलाइन प्रदर्शित कर रहे हैं, ऊंचाई आपकी लाइन-ऊंचाई विशेषता की ऊंचाई पर सेट की जानी चाहिए।

यह कैसे रखा गया है, इस पर निर्भर करता है कि आप हमेशा फ्लोट का उपयोग कर सकते हैं: बाएं या फ्लोट: लाइन ब्रेक को रोकने के लिए अवधि/div पर सही। लेकिन अगर आप इसे वाक्य के बीच में चाहते हैं, तो वह विकल्प बाहर है।

Answer 3

इनलाइन तत्वों की ऊंचाई ऊंचाई (न ही चौड़ाई) हो सकती है। स्पैन डिफ़ॉल्ट रूप से display: inline पहले से ही हैं। इस मामले में इंटरनेट एक्सप्लोरर वास्तव में टूटा ब्राउज़र है।

Answer 4

आप display: block; पर सेट होने पर केवल एक अवधि तत्व की ऊंचाई (और चौड़ाई) को बदल सकते हैं। ऐसा इसलिए है क्योंकि यह सामान्य रूप से एक इनलाइन तत्व है। div सामान्यतः display: block; पर सेट है।

एक समाधान का उपयोग करने से हो सकता है: ': इनलाइन प्रदर्शन' एक ऊंचाई जुड़ा नहीं प्राप्त कर सकते हैं क्योंकि, इनलाइन जा रहा है, यह उसकी ऊंचाई अपनी सामग्री से हो जाता है

<div style="background: #f00;"> 
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text. 
</div> 

Answer 5

समस्या यह है कि है। वैसे भी, आप लाइन के अंत में टूटे हुए बॉक्स की ऊंचाई को कैसे परिभाषित करते हैं?

आप line-height 'स्थापित करने के लिए के बजाय कोशिश कर सकते हैं, या अगर यह अपनी संतुष्टि के लिए काम नहीं करता है, एक गद्दी सेट: कर रहा है जब तक

/* makes the whole box higher by inserting a space between the border and the content */ 
padding: 0.5em 0; 

Answer 6

आप ऊंचाई या चौड़ाई प्राप्त करने के लिए display: inline-block पर कोई तत्व सेट कर सकते हैं। यह आपको किसी तत्व को किसी भी अन्य "ब्लॉक शैलियों" को लागू करने की अनुमति देता है।

हालांकि सावधान रहना एक बात यह है कि फ़ायरफ़ॉक्स 2 इस संपत्ति का समर्थन नहीं करता है। फ़ायरफ़ॉक्स 3 इस संपत्ति का समर्थन करने वाला पहला मोज़िला-आधारित ब्राउज़र है। अन्य सभी ब्राउज़र इंटरनेट एक्सप्लोरर सहित इस संपत्ति का समर्थन करते हैं।

ध्यान रखें कि inline-block आपको क्विर्क मोड में चलने पर फ़ायरफ़ॉक्स पर तत्व के अंदर टेक्स्ट संरेखण सेट करने की अनुमति नहीं देता है। जहां तक ​​मुझे पता है, अन्य सभी ब्राउज़र इसे अनुमति देते हैं। यदि आप क्विर्क मोड में चलते समय टेक्स्ट-संरेखण सेट करना चाहते हैं, तो आपको inline-block की बजाय -moz-inline-stack संपत्ति का उपयोग करना होगा। ध्यान रखें कि यह एक मोज़िला-केवल संपत्ति है, इसलिए आपको यह सुनिश्चित करने के लिए कुछ ब्राउज़र पहचान करना होगा कि केवल मोज़िला इसे प्राप्त करता है, जबकि अन्य ब्राउज़रों को मानक inline-block मिलता है।

Answer 7

line-height:1.1

= 100% भरा

Answer 8

पाठ तत्व आप गद्दी और ब्लॉक इनलाइन विशेषताओं का उपयोग समायोजित कर सकते हैं अंदर संरेखण के साथ em = relative line-height

उदाहरण height:1.1em के लिए

में height। display: inline-ब्लॉक; गद्दी-टॉप: 3px; उदाहरण के लिए

Answer 9

निम्नलिखित अवधि की ऊंचाई सेट करने के लिए फ़ायरफ़ॉक्स

span { 
    display: block; 
    height: 50px; 
}