2011-01-30 15 views
21

मैंने अभी कुछ मजाकिया देखा है। मान लीजिए कि मैं एक HTML सूची करते हैं:सीएसएस ओवरफ्लो: छुपा छुपा एक सूची के गोलियां?

<ol> 
    <li>Lorem</li> 
    <li>ipsum</li> 
    <li>dolor</li> 
    <li>sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</li> 
</ol> 

और यह सीएसएस:

li { 
    white-space: nowrap; 
    overflow: hidden; 
} 

अंतिम आइटम में लंबे पाठ वास्तव में बंद काट दिया जाता है जब यह कंटेनर की चौड़ाई बंद हो जाता है, के रूप में उम्मीद। परंतु! सूची आइटम संख्या overflow संपत्ति से भी प्रभावित होती हैं और दिखाई नहीं देती हैं।

हालांकि, इस तरह सीएसएस संशोधित:

ol { 
    overflow: hidden; 
} 
li { 
    white-space: nowrap; 
} 

काम करता है के रूप में इरादा (पाठ कंटेनर से बाहर जाना नहीं होगा, लेकिन सूची आइटम दिखाया जाता है)। फ़ायरफ़ॉक्स 4 बीटा 10 के लिए कम से कम यह सब सच है।

क्या आपको नहीं लगता कि overflow से प्रभावित होने वाली संख्या थोड़ा अजीब है? ऐसा क्यों होगा? क्या यह इरादा व्यवहार है? क्या यह विनिर्देशन में है या क्या यह कुछ विचित्रता है जो किसी से निपटने के लिए भूल गया है?

+0

यह सब 4 बीटा 10 व्यवहार है? या आपने अन्य ब्राउज़रों पर भी परीक्षण किया था? –

+0

नहीं, मैंने परीक्षण नहीं किया क्योंकि मुझे वास्तव में इसे ठीक करने की परवाह नहीं है ('ol' पर 'ओवरफ्लो' सेटिंग को चाल है, मैं केवल उत्सुक हूं) – mingos

उत्तर

34

यह जहाँ तक मैं के रूप में अवगत, अगर list-positionoutside है, एक ol नहींं शो के एक ul की गोलियों और संख्या डिफ़ॉल्ट व्यवहार है। कम से कम फ़ायरफ़ॉक्स में मुझे पुराने संस्करणों में पहले इसे देखना याद है।

+12

आह! अच्छा था! मैंने अभी इसकी जांच की है और वास्तव में, 'सूची-शैली-स्थिति: अंदर' गोलियों को 'li' के अंदर दिखाई देती है, और वे अब 'ओवरफ्लो' से प्रभावित नहीं हैं। मुझे कुछ ऐसा ही संदेह था, लेकिन यकीन नहीं था। धन्यवाद। – mingos

0

मैंने देखा है कि उल के बाईं ओर पर्याप्त पैडिंग नहीं होने पर मैंने अपनी गोलियां/संख्याएं फिसल गई हैं। थोड़ा जोड़ने का प्रयास करें और देखें कि क्या इससे मदद मिलती है।

+0

वास्तव में नहीं। मेरे विशेष मामले में, 40px पैडिंग है। गोलियां पूरी तरह से 'ओल' के पैडिंग के अंदर हैं। मुझे लगता है कि इसे 'li' तत्वों के कुछ अजीब व्यवहार के साथ और अधिक करना है (मुझे लगता है कि उनकी गोलियां वास्तविक' li' के बाहर प्रस्तुत की जाती हैं) ... क्या मैंने अभी मेरे प्रश्न का उत्तर दिया है? – mingos

+0

का क्रमबद्ध करें। सूची-शैली-स्थिति –

1

ब्राउज़र सूचियों में डिफ़ॉल्ट मार्जिन और पैडिंग जोड़ते हैं। डिफ़ॉल्ट शैलियों को हटाने के लिए पहले reset.ss का उपयोग करने का प्रयास करें, जिस तरह से आप अप्रत्याशित व्यवहार के बिना साफ और ताजा शुरू कर सकते हैं। एरिक मेयर के रीसेट की खोज करें। आशा करता हूँ की ये काम करेगा।

+0

देखें, मैं पहले से ही रीसेट का उपयोग करता हूं, लेकिन फिर भी धन्यवाद :)। – mingos

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