आईई सीएसएस प्रतिशत गोल करने की समस्या के आसपास मैं कैसे प्राप्त करूं?

Question

मैं एक गतिशील साइट बनाने की कोशिश कर रहा हूं जहां मेरे पास एक दूसरे के बगल में तीन फ़्लोटिंग बॉक्स हैं। वे प्रत्येक चौड़ाई में 33.33% हैं। उनके चारों ओर कंटेनर div चौड़ाई में 75% है।

मैं इस समस्या के बारे में यहाँ एक लेख मिल गया है: Jumping columns example

खींचें विंडो का आकार IE7 में कूद देखने या उससे पहले के लिए: CSS: Jumping columns
मैं भी एक ही समस्या का एक उदाहरण मिल गया है।

कोई भी जानता है कि इसके आसपास जाना संभव है? (जावास्क्रिप्ट के बिना)

Answer 1

इस तरह की स्थिति में, मैं एक आईई-केवल स्टाइलशीट का उपयोग कर समस्या को हल करने के लिए प्रवृत्त होता हूं जो मूल्यों को तब तक कम करता है जब तक वे काम नहीं करते। इस मामले में, केवल चौड़ाई को 33% पर सेट करें, यह सही नहीं होगा लेकिन फिर यह केवल वेब की प्रकृति है।

Answer 2

मैं स्थिति के आधार पर दो अलग-अलग समाधानों का उपयोग करता हूं। सबसे पहले, (नाव/चौड़ाई के बजाय एक पंक्ति में overflow: hidden; का उपयोग कर अंतिम तत्व पर) निकोल सुलिवान तरीके का प्रयास करें:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

.container { 
    width: 75%; 
} 

.box1 { 
    width: 33.33%; 
    float: left; 
    display: inline; /* fixes another IE bug */ 
} 

.box2 { 
    overflow: hidden; 
} 

यह ज्यादातर मामलों में काम करता है।

विफल होने के कारण, मैं इसके बजाय अंतिम तत्व में कई पिक्सल का नकारात्मक मार्जिन जोड़ता हूं।

.box2 { 
    width: 33.33%; 
    float: left; 
    display: inline; /* fixes another IE bug */ 
    margin-right: -3px; 
} 

यदि वह अंतिम तत्व दाईं ओर तैरता है, तो बाईं ओर नकारात्मक मार्जिन जोड़ें। अब तक कुछ मामलों में मेरे लिए काम किया है जहां overflow फिट नहीं हुआ।

Answer 3

मुझे लगता है कि एक साधारण उत्तर बिल्कुल गोल नहीं हो सकता है, केवल 1% चौड़ाई वाला एक अंतिम "स्पेसर" तत्व बनाएं जो 1/3 तत्वों के रूप में साझा करता है। यहां तक ​​कि आईई 33 + 33 + 33 + 1 राउंडिंग से निपटने में सक्षम होना चाहिए।

Answer 4

मुझे एक ही समस्या थी। यानी 7 ने 33.33% सही ढंग से प्रस्तुत नहीं किया। यह 33% के साथ काम करेगा लेकिन फिर यह एक हेयरलाइन बंद था। मैंने उपरोक्त पहली प्रतिक्रिया में कोड के दूसरे ब्लॉक से सलाह का उपयोग किया, साथ ही थोड़ा यानी हैक। यह मेरे लिए काम करता है, मुझे उम्मीद है कि यह मदद करता है।

.all-boxes { 
    width: 33.33%; 
    float: left; 
    display: inline; 
    *margin-right: -1px; /* Add the asterisk */ 
} 

मार्जिन मान को आपके कार्यान्वयन के आधार पर बदलने की आवश्यकता हो सकती है, लेकिन 1px मेरे लिए काम करता है।