2013-02-14 13 views
5

निम्न कोड अलग-अलग ब्राउज़रों (आईई = एफएफ = आधार रेखा से अधिक, क्रोम = बेसलाइन पर) में अलग-अलग प्रस्तुत करता है।डिस्प्ले: इनलाइन-ब्लॉक और ओवरफ़्लो: अलग-अलग लंबवत संरेखण के लिए अग्रणी छुपा

  1. किसकी गलती है? मुझे बग रिपोर्ट कहां दर्ज करनी चाहिए?

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

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline-block; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html> 

http://jsfiddle.net/T2vQj/

उत्तर

3

ऐसा लगता है कि क्रोम त्रुटि में है। CSS 2.1 spec कहते

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

के बाद से अतिप्रवाह संपत्ति इनलाइन-ब्लॉक आधारभूत निचला हाशिया बढ़त है, जो युक्त लाइन बॉक्स के आधारभूत पर बैठता है, और इसलिए अनुमति देने के लिए निहित पाठ ऊपर उठाने चाहिए 'दृश्य' के अलावा कुछ करने के लिए गणना करता है उस पाठ के वंशजों के लिए जगह।

+0

बहुत बहुत धन्यवाद। http://code.google.com/p/chromium/issues/detail?id=176244 – mh543

1

हां। आपको इन्हें करने की ज़रूरत है:

  1. शैली overflow: hidden; शैली को हटाएं। इसकी आवश्यकता नहीं है। आपको केवल तभी आवश्यकता होती है जब आप width या text-overflow: ellipsis; दें।

  2. vertical-align: bottom; जोड़ें। जब टेक्स्ट inline से inline-block पर बदल जाता है तो पाठ का लंबवत संरेखण बदल जाएगा।

+1

1. मैं प्रकाशित एक न्यूनतम काम कर उदाहरण की कोशिश करो। मैंने जो कुछ भी दिखाने के इरादे से व्यवहार को पुन: उत्पन्न करने के लिए जरूरी नहीं है, उसे छोड़ दिया। 2. नहीं, मूल पोस्टिंग में वर्णित अनुसार, लंबवत-संरेखण विभिन्न ब्राउज़रों में अलग-अलग परिणामों की ओर जाता है। – mh543

+0

हां। प्रत्येक ब्राउज़र उनमें 'इनलाइन-ब्लॉक' का डिफ़ॉल्ट मान संभालता है। –

-1

यह

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html> 
संबंधित मुद्दे