DOCTYPE लाइन-ऊंचाई

के प्रतिपादन को प्रभावित करता है यह एक सिर स्क्रैचर है।DOCTYPE लाइन-ऊंचाई

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

http://jsfiddle.net/jackwanders/WKvPv/

असल में, जब एक एचटीएमएल 5, एचटीएमएल 4 सख्त या XHTML सख्त DOCTYPE का उपयोग कर, बटन तैयार किया गया है के रूप में बना देता है। हालांकि, एक HTML4 या XHTML संक्रमणकालीन DOCTYPE का उपयोग करते समय, कैरेट बटन एक छोटी ऊंचाई के साथ प्रस्तुत करता है।

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    vertical-align: top; 
    border-top: 4px solid #000000; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    content: ""; 
} 

.btn .caret { 
    margin-top: 7px; 
    margin-left: 0; 
} 

.btn { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    line-height: 18px; 
    *line-height: 20px; 
    text-align: center; 
    vertical-align: middle; 
}

क्यों DOCTYPE बटन की ऊंचाई को प्रभावित करता है: यहाँ <span class="caret"> के लिए बूटस्ट्रैप से प्रासंगिक सीएसएस है (मैं शैलियों कि कोई बात नहीं, रंग और ढ़ाल तरह हटा दिया है)? यदि line-height 18px पर सेट है, तो ऊंचाई 18px से कम क्यों होगी?

पुनश्च - हाँ, मुझे पता है कि बूटस्ट्रैप एचटीएमएल 5 की आवश्यकता है हूँ, लेकिन मुझे लगता है कि कल्पना एचटीएमएल 5 के संबंध में उपयोग किया सुविधाओं के साथ है, है ना कैसे DOCTYPE renders सीएसएस शैलियों

स्रोत

2012-06-29 jackwanders

हालांकि यह सवाल और लेखन संबंधित जेएसफ़ील्ड डेमो, मैं कुछ और खुदाई कर घायल हो गया और पता चला कि क्या हो रहा है। सवाल को स्क्रैप करने के बजाय, मुझे लगा कि मैं इसे इस उत्तर के साथ भी पोस्ट कर सकता हूं।

क्या मैं doctypes स्विच करने के बाद क्रोम में तत्वों का निरीक्षण से एकत्र किया है:

.btn कोई ऊंचाई निर्दिष्ट है, केवल line-height: 18px और padding: 4px 10px
, caret- के अंतिम ऊंचाई केवल बटन 18px, परिभाषित line-height
एक संक्रमणकालीन DOCTYPE के समान ही है, कैरट-केवल बटन की ऊंचाई 11px, caret (border-topकी outerHeight() रूप में ही है), लेकिन बटन के line-height से कम।

तो, मैं केवल यह मान सकते हैं कि सख्त (और एचटीएमएल 5) doctypes min-height किसी तरह के रूप में लागू line-height; यहां तक कि यदि तत्व में कोई पाठ नहीं है, तो यह line-height लागू होता है ... जबकि संक्रमणकालीन डॉक्टर नहीं होते हैं।

जब मैं केवल कैरेट-केवल बटन (उदाहरण के लिए  ) में कुछ टेक्स्ट जोड़ता हूं, तो line-height संक्रमणकालीन DOCTYPEs पर किक करता है और बटन पूर्ण ऊंचाई पर प्रस्तुत करता है।

स्रोत

2012-06-29 20:30:23 jackwanders

संक्रमणकालीन DOCTYPE ट्रिगर करता है जिसे लगभग मानक मोड कहा जाता है, जो मूल रूप से कुछ quirks के साथ मानक मोड है। चूंकि इसे बॉक्स मॉडल के साथ करना है, इसलिए आप * उन quirks में से एक में चल रहे हैं, लेकिन मुझे यकीन नहीं है ... – BoltClock

मैं हाल ही में [इस माइक्रोसॉफ्ट पेज] (http: // msdn) में आया था। microsoft.com/en-us/library/ff405794%28v=vs.85%29) जो लगभग मानकों मोड के लाइन-ऊंचाई हैंडलिंग अंतर का वर्णन करता है। मैं इसे [इस उत्तर] में चर्चा करता हूं (http://stackoverflow.com/questions/11206730/html5-vs-html4-h1-tag-rendered-with-extra-space-how-to-remove/11217791#11217791) आपके प्रश्न के लिए भी प्रासंगिक है। विशेष रूप से, यह स्ट्रैट के संचालन की अनुपस्थिति है जो आपके द्वारा देखे जाने वाले अंतर का कारण बनती है। – Alohci

बस इस मुद्दे को हिट करें। यह 2016 के बाहर है, लेकिन हम अभी भी एक ही मुद्दे से निपट रहे हैं :(वैसे भी आपके उत्तर के लिए धन्यवाद! – vmg

उत्तर

संबंधित मुद्दे