में उप-पिक्सेल राउंडिंग समस्या को ठीक करना मैं तरल सीएसएस ग्रिड बनाने की कोशिश कर रहा हूं, यह फ़ायरफ़ॉक्स और आईई 8 + में काम करता है लेकिन सफारी/क्रोम/ओपेरा में नहीं है जहां उप-पिक्सेल राउंडिंग समस्या दिखाई देती है:एक सीएसएस फ्लूइड ग्रिड
.column {
float: left;
width: 25%;
}
मुख्य कंटेनर 100% की चौड़ाई है, और यदि आप सफारी/क्रोम/ओपेरा में ब्राउज़र आकार बदलने आप देख सकते हैं कि गोल चौड़ाई असंगत हैं।
समस्या के बारे में व्यापक रूप से पढ़ने के बाद मुझे समझ में आया कि उप-पिक्सेल राउंडिंग के लिए "कोई सही या गलत समाधान नहीं है", लेकिन फ़ायरफ़ॉक्स तरीका मेरे लिए सबसे अच्छा समझौता प्रतीत होता है। (उदाहरण के लिए, यदि मैं 25% की चौड़ाई पर 4 divs सेट करता हूं तो मुझे लगता है कि कवर क्षेत्र 100% होना चाहिए।)
मैं जानना चाहता हूं कि कोई सीएसएस केवल समाधान है जिसे मैं याद करता हूं, या वैकल्पिक रूप से कुछ समस्या को हल करने के लिए जावास्क्रिप्ट।
धन्यवाद!
अपडेट: मई 2014 तक, क्रोम 33 और सफारी 7 ने "फ़ायरफ़ॉक्स तरीका" उठाया है।
मैंने कुछ दिनों पहले यहां एक समान प्रश्न का उत्तर दिया http://stackoverflow.com/questions/9914209/css-browser-pixel-rounding-overflow-hidden-with-percentages/9942854#9942854 जबकि यह समाप्त नहीं होता सभी तत्वों में बिल्कुल एक ही चौड़ाई में, यह शायद उतना करीब है जितना आप जावास्क्रिप्ट के बिना प्राप्त करने जा रहे हैं। –
उत्तर के लिए धन्यवाद। मैं अधिक लचीलापन रखने के लिए "पंक्ति" रैपर से छुटकारा पाना चाहता हूं, मैंने प्रत्येक पंक्ति को लपेटने के बिना अंगूठे गैलरी दिखाते हुए एक और उदाहरण जोड़ा। – gyo