आईई 10 लाइन-ऊंचाई बग प्रदर्शन के साथ: इनलाइन-ब्लॉक; और अतिप्रवाह: छुपा;

Question

तो, मैंने हाल ही में आईई 10 (श्वास) में एक अनोखी समस्या में भाग लिया है। ऐसा प्रतीत होता है कि यदि आप प्रदर्शन का उपयोग करते हैं: इनलाइन-ब्लॉक; अतिप्रवाह के साथ संयोजन में: छुपा; आईई 10 आपकी लाइन-ऊंचाई को गड़बड़ कर देता है। मैंने लंबवत-संरेखण का उपयोग करके इसे ठीक करने का प्रयास किया: मध्य; लेकिन यह केवल आईई 10 में समस्या को ठीक करता है और फिर अन्य ब्राउज़रों में बेसलाइन समस्याओं का परिचय देता है।

केवल कोड बग को गति प्रदान करने के लिए आवश्यक है:

सीएसएस:

.bug { 
    display:inline-block; 
    overflow:hidden; 
} 

HTML:

<p>This should <span class="bug">be buggy</span> in IE10</p> 

मैं एक JSFiddle बनाया बग वर्णन करने के लिए - http://jsfiddle.net/laustdeleuran/5pWMQ/ । http://cl.ly/image/2U1g3i0b0Y2y

किसी/देखा गया है इससे पहले कि यह समस्या सुलझा नहीं -

वहाँ भी बग यहाँ का एक स्क्रीनशॉट है?

संपादित करें:

यह एक IE10 बग (लेकिन मेरी ओर से आलसी परीक्षण के अधिक एक मामला) नहीं है। दरअसल क्रोम (वेबकिट) यह गलत कर रहा है - https://stackoverflow.com/a/15883508/799327।

Answer 1

CSS 2.1 कहते

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

जो आईई 10 कर रहा है ठीक है।

और फ़ायरफ़ॉक्स और ओपेरा एक ही काम कर रहे हैं।

यह आईई नहीं है जो खराब है, यह क्रोम है, जो उपरोक्त नियम का सही पालन नहीं कर रहा है।