यानी 7 सीएसएस इनलाइन-ब्लॉक या फिक्स्ड

Question

के साथ काम नहीं करता है, मुझे पता है कि इससे पहले दस लाख बार पूछा गया है, लेकिन मैंने जो भी प्रयास नहीं किया है, वह समस्या हल हो गई है। मैं एक अच्छी लग रही <select> प्रकार की चीज़ पर काम कर रहा हूं। मैं इसे सामान्य सीएसएस ड्रॉप डाउन नेविगेशन मेनू से बाहर कर रहा हूं (नेस्टेड <ul> एस और <li> एस का उपयोग करके, कुछ बदलावों के साथ। एक बदलाव यह है कि मुझे इसे इनलाइन प्रदर्शित करने की आवश्यकता है (इसे फ़्लोट किए बिना क्योंकि यह किसी अन्य के पीछे जाता है इसके समान तत्वों में तत्व, और मैं इसके चारों ओर सबकुछ तैरना नहीं चाहता हूं)। मुझे ब्राउज़र में अच्छी तरह से काम करना है यानी 7 (और शायद कुछ भी कम है, लेकिन मुझे कम से कम कुछ भी चाहिए ।

लेकिन अगर: http://jsfiddle.net/ralokz/hjDVS/2/

आपको लगता है कि किसी भी गैर IE7 ब्राउज़र में को देखें, तो यह की तरह लग रहा है कि कैसे मैं यह करना चाहते हैं: IE7) यहाँ कोड है आप IE7 में इसे देख, यह इस तरह दिखता है: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/:

एक साइट है कि मैं इनलाइन-ब्लॉक सुधार के लिए एक बहुत ऊपर आ देखा यह है। यह IE8 के लिए काम किया, लेकिन दुर्भाग्य से ie7 अभी भी सही नहीं दिख रहा है।

क्या आई 7 के लिए इनलाइन-ब्लॉक को ठीक करने का कोई और तरीका है? या, क्या यह सुनिश्चित करने के लिए कोई सीएसएस विकल्प है कि दूसरे स्तर <li> एस को पहले स्तर <li> के साथ लंबवत रूप से गठबंधन किया गया है? धन्यवाद!

Answer 1

जोड़ें: position:relative;div.dropdown ul li को, div.dropdown ul li ul पर मार्जिन से छुटकारा पाने और यह सेट top:25px, left:-1px;, width:100%; अंत में, margin:0; करने के लिए div.dropdown ul li ul li सेट बाएं-दाएं गद्दी हटा देते हैं और width:100% सेट ...

मैं कुछ छूट गया हो सकता है, लेकिन यहाँ एक काम उदाहरण है: http://jsfiddle.net/hjDVS/7/

मैं अपने वास्तविक समस्या बिल्कुल तैनात किया गया था ul लगता है

Answer 2

आईई 6 और आईई 7 inline-block का समर्थन करते हैं, लेकिन उनके पास एक बड़ी बग है: वे केवल उन तत्वों पर इसका समर्थन करते हैं जिनमें inline की डिफ़ॉल्ट डिस्प्ले शैली है।

इसलिए span {display:inline-block;} काम करेगा, लेकिन div {display:inline-block;} नहीं है।

यह आपके लिए एक मुद्दा है, तो अच्छी खबर है: वे एक और बग, जो inline काम जिस तरह से inline-block कुछ मामलों में माना जाता है बनाता है, तो आप बस display:inline; उपयोग करने में सक्षम हो सकता है।

यदि आप ऐसा करने जा रहे हैं, तो आपको यह सुनिश्चित करने के लिए सावधान रहना होगा कि केवल आईई 6 और आईई 7 ऐसा करें, क्योंकि अन्य ब्राउज़रों को उचित inline-block; शैली की आवश्यकता होगी। इसे प्राप्त करने के लिए कुछ ब्राउज़र-विशिष्ट हैक्स या सशर्त टिप्पणियों की आवश्यकता हो सकती है।

Answer 3

आईई 7 स्टाइलशीट में display:inline-block के साथ प्रत्येक नियम के लिए, zoom:1; display:inline; में यह सभी तत्वों के साथ काम करता है, और इसी तरह से काम करता है।