2013-01-06 11 views
7

HTML:निम्नलिखित सबसे छोटे HTML में क्रोम पर क्षैतिज स्क्रॉलबार दिखाई देने का क्या कारण है?

<html> 

    <body> 
    <div> 
     <input type="text"> 
    </div> 
    </body> 

</html> 

सीएसएस:

body { 
    font:13px/1.231 arial; 
} 
input { 
    font:99% arial; 
} 
div { 
    display: inline-block; 
    overflow: auto; 
} 
input { 
    width: 15em; 
} 

क्रोम पर परिणाम:

enter image description here

jsFiddle - http://jsfiddle.net/XBvWb/18/

ध्यान दें कि एफएफ और न ही IE9 न तो इस दिखाने स्क्रॉल पट्टी।

क्या कोई मुझे प्रबुद्ध कर सकता है, कृपया, क्या हो रहा है?

संपादित

निकाला गया इनपुट सीमा, गद्दी और मार्जिन - http://jsfiddle.net/XBvWb/41/

+1

यह 'ओवरफ्लो: ऑटो' div – Musa

+0

पर कृपया, नीचे दिए गए उत्तरों पर मेरे जवाब देखें। – mark

+0

यदि मैं div-inline के रूप में div सेट करता हूं, तो स्क्रॉलबार –

उत्तर

8

मेरा अनुमान है कि क्रोम को गोल करने में समस्या है।

यदि आप इनपुट चौड़ाई के लिए पीएक्स के किसी भी मान का उपयोग करते हैं तो स्क्रॉलबार गायब हो जाता है। वही जब आप इनपुट फ़ॉन्ट फ़ॉन्ट को 100% तक बदलते हैं (जो इस उदाहरण में बिल्कुल 13px के बराबर है)।

इनपुट की वर्तमान चौड़ाई मुझे लगता है कि स्क्रॉलबार प्रदर्शित होने पर .05px 15 * 99% * 13 पिक्सल = 193.05px

है।

यह भी स्पष्ट करता है कि स्क्रॉलबार लगभग 11em की चौड़ाई के लिए क्यों गायब हो जाता है। यह क्रोम को बेहतर तरीके से संभाल सकता है।

+0

+1, अच्छा जवाब। प्रत्येक ब्राउज़र इन चीजों को अलग-अलग संभालता है। क्रोम के लिए, कैसे मूल कंटेनर का आकार गणना की जाती है वह स्पष्ट रूप से समान नहीं है कि तत्व के आकार की गणना कैसे की जाती है। – Sparky

+0

यह बिल्कुल ऐसा है। मैंने 99% से 100% बदल दिया और यह अभी ठीक है। धन्यवाद। – mark

1

निम्न पंक्ति अतिरिक्त स्क्रॉल पट्टी खड़ी कर रहा है:

overflow: auto; 

आप भी बस इसे छोड़ दो और जोड़ सकते हैं div के लिए एक स्पष्ट चौड़ाई:

width: 100%; 

या div एक ब्लॉक स्तर तत्व

display:block 

मूल रूप से आप एक inline-block स्तर तत्व के अंदर एक block स्तर तत्व डाल करने वाला कभी नहीं कर रहे हैं।

+0

क्यों अतिप्रवाह ऑटो एक समस्या है? मुझे किसी भी तत्व को बहने वाला कोई तत्व नहीं दिख रहा है, इस मामले में ऑटो को कोई स्क्रॉलबार नहीं दिखाना चाहिए। – mark

+0

यह ठीक है कि कैसे क्रोम अपने 'इनलाइन-ब्लॉक' स्तर तत्वों का इलाज करता है। यदि आपने 'डिस्प्ले: ब्लॉक' का उपयोग किया है तो यह भी ठीक होगा। सम्मेलन से आपको कभी भी 'इनलाइन-ब्लॉक' तत्व के अंदर 'ब्लॉक' स्तर तत्व नहीं होना चाहिए (आपके मामले में, 'इनलाइन-ब्लॉक' div के अंदर 'टेक्स्टबॉक्स')। –

+2

एक 'इनपुट' को ब्लॉक-स्तरीय तत्व नहीं माना जाता है, इसलिए इसे' इनलाइन-ब्लॉक 'के अंदर डालने में कुछ भी गलत नहीं होना चाहिए। – Sparky

1

अतिप्रवाह: यदि सामग्री बंद हो जाती है तो ऑटो स्क्रॉलबार को मजबूर करता है। आपकी चौड़ाई: इनपुट पर 15em सामग्री को क्लिप करने का कारण बन रहा है जिससे स्क्रॉलबार दिखाई देने के लिए मजबूर हो रहा है।

+0

सामग्री को क्लिप करने के लिए मजबूर क्यों किया जाता है? यदि 15em सामग्री क्लिप करता है, तो 14em निश्चित रूप से नहीं - सही? ठीक है, 15em से 14em में बदलें और आप एक ही प्रभाव देखेंगे। – mark

+0

मुझे लगता है कि समस्या वास्तव में प्रदर्शन के साथ निहित है: इनलाइन-ब्लॉक, यदि आप इसे प्रदर्शित करने के लिए बदलते हैं: इनलाइन, इसे समस्या को हल करना चाहिए। –

+0

इसके अलावा यह 11em पर क्लिपिंग बंद कर देता है। –

0

मेरे पास एक समान समस्या है जहां क्रोम में एक क्षैतिज स्क्रॉल बॉक्स दिखाई दे रहा है लेकिन फ़ायरफ़ॉक्स नहीं।

body { 
    overflow-x:hidden; 
} 

नोट::

अपनी साइट (सबसे साइटों की तरह) क्षैतिज स्क्रॉल का उपयोग नहीं करता, तो आप बस इस तरह एक्स अक्ष पर सभी अतिप्रवाह छुपा कर इस समस्या को हल कर सकते हैं या आप उस पर सेट कर सकते हैं html टैग भी। सुनिश्चित नहीं है कि कौन सा बेहतर है।

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