2012-03-09 27 views
8

में उप-पिक्सेल राउंडिंग समस्या को ठीक करना मैं तरल सीएसएस ग्रिड बनाने की कोशिश कर रहा हूं, यह फ़ायरफ़ॉक्स और आईई 8 + में काम करता है लेकिन सफारी/क्रोम/ओपेरा में नहीं है जहां उप-पिक्सेल राउंडिंग समस्या दिखाई देती है:एक सीएसएस फ्लूइड ग्रिड

http://jsfiddle.net/bJKQ6/2/

.column { 
    float: left; 
    width: 25%; 
} 

मुख्य कंटेनर 100% की चौड़ाई है, और यदि आप सफारी/क्रोम/ओपेरा में ब्राउज़र आकार बदलने आप देख सकते हैं कि गोल चौड़ाई असंगत हैं।

समस्या के बारे में व्यापक रूप से पढ़ने के बाद मुझे समझ में आया कि उप-पिक्सेल राउंडिंग के लिए "कोई सही या गलत समाधान नहीं है", लेकिन फ़ायरफ़ॉक्स तरीका मेरे लिए सबसे अच्छा समझौता प्रतीत होता है। (उदाहरण के लिए, यदि मैं 25% की चौड़ाई पर 4 divs सेट करता हूं तो मुझे लगता है कि कवर क्षेत्र 100% होना चाहिए।)

मैं जानना चाहता हूं कि कोई सीएसएस केवल समाधान है जिसे मैं याद करता हूं, या वैकल्पिक रूप से कुछ समस्या को हल करने के लिए जावास्क्रिप्ट।

धन्यवाद!

अपडेट: मई 2014 तक, क्रोम 33 और सफारी 7 ने "फ़ायरफ़ॉक्स तरीका" उठाया है।

+0

मैंने कुछ दिनों पहले यहां एक समान प्रश्न का उत्तर दिया http://stackoverflow.com/questions/9914209/css-browser-pixel-rounding-overflow-hidden-with-percentages/9942854#9942854 जबकि यह समाप्त नहीं होता सभी तत्वों में बिल्कुल एक ही चौड़ाई में, यह शायद उतना करीब है जितना आप जावास्क्रिप्ट के बिना प्राप्त करने जा रहे हैं। –

+0

उत्तर के लिए धन्यवाद। मैं अधिक लचीलापन रखने के लिए "पंक्ति" रैपर से छुटकारा पाना चाहता हूं, मैंने प्रत्येक पंक्ति को लपेटने के बिना अंगूठे गैलरी दिखाते हुए एक और उदाहरण जोड़ा। – gyo

उत्तर

8

Stubbornella के OOCSS ढांचे (नीचे लिंक) अंतिम स्तंभ निम्नलिखित ओवरराइड देकर इस के साथ मॉड्यूल सौदों ग्रिड:

float: none; 
overflow: hidden; 
width: auto; 

यह कब्जा करने के लिए जो कुछ भी चौड़ाई कंटेनर के भीतर रहता है की अनुमति देता है।

ब्राउज़र-forking के बारे में थोड़ी (आईई, ptzsch ...) के लिए आवश्यक है समान व्यवहार प्राप्त करने के लिए: https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids

+0

बार्नी धन्यवाद, केवल एक ही कमी है जो अंतिम यूनीट क्लास है जो थोड़े अपरिहार्य है। – gyo

+0

मुझे पता है कि आपका क्या मतलब है - मुझे व्यक्तिगत रूप से लगता है कि संरचनात्मक वर्ग के नाम लचीले एचटीएमएल का एक आवश्यक घटक हैं, लेकिन इसका मतलब यह है कि इसमें बहुत कुछ शामिल है। ऐसा कहकर, अतिरिक्त कक्षाओं के उचित हिस्से से बचना संभव है यदि आप ' उन ब्राउज़रों के लिए समर्थन छोड़ने के लिए तैयार हैं जो उन्नत सीएसएस 2.1 चयनकर्ताओं का समर्थन नहीं करते हैं: '.line> *' और '.lastUnit' के साथ 'यूनिट' के संदर्भों को '.line> *: last-child' के साथ बदलें। – Barney

+0

अरे @gyo, मैंने उपर्युक्त का एक डेमो बनाया: http://jsfiddle.net/barney/7Bd8V/, फिर मैं एक कदम आगे चला गया और 'लाइन' वर्ग को छोड़कर सब कुछ छीन लिया, जहां एक छीनने वाले मामले के लिए हम मानते हैं कि सभी आंशिक चौड़ाई बराबर चौड़ाई बनना चाहती है: http://jsfiddle.net/barney/32Q8B/ – Barney

0

यह बेकार है इस पिक्सल ऊपर और नीचे दौर होगा कि के लिए एक अच्छी विकल्प नहीं है प्रत्येक ब्राउज़र के लिए है, लेकिन उस के एवज में, मैं आमतौर पर करते हैं:

.nested:last-child { 
    float: right; 
} 
.nested:first-child { 
    float: left; 
} 

यह सही करने के लिए अंतिम संतान तैर सकती है तो पिक्सल unalignment स्पष्ट नहीं है, लेकिन अगर यह केवल तत्व (मान लीजिए कि एक div कि 33% चौड़ाई है), तो यह बाएं तैरना जारी रहेगा।

+0

वही समस्या जैसा कि मैंने यहां परिभाषित किया है : प्रसाद पी: //stackoverflow.com/questions/9635347/fixing-sub-pixel-rounding-issue-in-a-css-fluid-grid/12371926#comment23915801_12371926 यदि तत्व को अगली पंक्ति में छोड़ने की आवश्यकता है, तो यह फ़्लोट हो गया है सही। मुझे लगता है कि एकमात्र उचित समाधान प्रीप्रोसेसर का उपयोग करना है और उचित दिशा में गोल करने के लिए विक्रेता उपसर्गों के साथ पूर्ण प्रत्येक तत्व के लिए छत() और फर्श() (स्टाइलस लेकिन एससीएसएस समकक्ष है) का उपयोग करना है। अगर मैं कुछ भी समझता हूं तो मैं वापस रिपोर्ट करूंगा ... – Cory

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