सीएसएस: ऊर्ध्वाधर-संरेखण क्यों है: अतिप्रवाह का उपयोग करते समय फ़ायरफ़ॉक्स पर बेसलाइन स्टॉप काम करना बंद कर दिया: छुपा हुआ?

Question

आप इसे test case चलाकर इसे पुन: पेश कर सकते हैं। परिणाम नीचे स्क्रीनशॉट में दिखाए जाते हैं। मुद्दा यह है कि फ़ायरफ़ॉक्स पर, "ब्लॉक" (स्क्रीनशॉट में ग्रे पृष्ठभूमि के साथ) पर overflow: hidden जोड़ते समय, ब्लॉक स्टॉप को गठबंधन किया जा रहा है जैसा कि मैं चाहता हूं: ब्लॉक में टेक्स्ट की आधार रेखा के बजाय पैरेंट बॉक्स की आधार रेखा से संरेखित करें, ऐसा लगता है कि ब्लॉक के नीचे पैरेंट बॉक्स की आधार रेखा पर गठबंधन किया गया था। जैसा कि आप स्क्रीनशॉट में देख सकते हैं, यह क्रोम के साथ नहीं होता है।

1. क्या यह फ़ायरफ़ॉक्स बग है?
2. फ़ायरफ़ॉक्स पर अपेक्षित परिणाम कैसे प्राप्त करें (overflow: hidden के साथ बेसलाइन संरेखण)?

नोट: "ब्लॉक" इसे काट नहीं है, क्या मैं वास्तव में चाहते हैं के रूप में आधारभूत संरेखण है पर vertical-align: middle का उपयोग करना। आप अधिक स्पष्ट रूप से देख सकते हैं कि vertical-align: middlepadding: 1em 0 .1em 0 की स्थापना (बॉक्स के शीर्ष पर अधिक गद्दी) है, जो आप दे द्वारा आधारभूत संरेखण नहीं करता है:

Answer 1

जोड़ने का प्रयास करें vertical-align: text-bottom;.block को

आप भी .label और .block

Answer 2

के लिए बराबर लाइन ऊंचाइयों सेट करने का प्रयास की कोशिश कर सकते

 
.label { 
     float: left; 
     line-height: 30px; 
     margin-right: 5px; 
     } 

यह एफएफ और क्रोम/सफारी दोनों में वांछित परिणाम प्राप्त करेगा। हालांकि आईई में परीक्षण नहीं किया था।

Answer 3

यह अतिप्रवाह की तरह दिखता है: छुपा हुआ है यह एक इनलाइन-ब्लॉक तत्व से आधार रेखा को हटा देता है। सौभाग्य से, अतिप्रवाह के लिए एक प्रतीत होता है अनावश्यक मोज़िला सीएसएस एक्सटेंशन मान जो अतिप्रवाह को रोकता है लेकिन यह छोटी गाड़ी व्यवहार प्रदर्शित नहीं करता है।

इस प्रयास करें:

.block { 
    width: 10em; padding: .3em 0 .1em 0; 
    overflow: hidden; 
    overflow: -moz-hidden-unscrollable; 
    white-space: nowrap; 
    display: inline-block; 
    border: 1px solid #666; background-color: #eee;  
} 

ऐसा लगता है कि यह फ़ायरफ़ॉक्स में समस्या को सही और सफारी के साथ गड़बड़ नहीं है की तरह।

अद्यतन:

ऐसा लगता है कि फ़ायरफ़ॉक्स और ओपेरा अतिप्रवाह प्रदान कर रहे हैं: सही ढंग से छिपा इनलाइन ब्लॉक और वेबकिट ब्राउज़रों नहीं हैं।

W3C CSS2 Working Draft's Visual Formatting Model Details के अनुसार

,

एक 'इनलाइन-ब्लॉक' की आधारभूत, में इसकी आखिरी पंक्ति बॉक्स के आधारभूत सामान्य प्रवाह है जब तक कि यह या तो है कोई में प्रवाह लाइन बक्से या यदि इसकी 'ओवरफ्लो' प्रॉपर्टी में 'दृश्यमान' के अलावा अन्य गणना की गई है, जिसमें केस बेसलाइन नीचे मार्जिन एज है।

अपने ऊर्ध्वाधर संरेखण के लिए