क्या सिकुड़ने वाली सामग्री के साथ फ़ायरफ़ॉक्स की बग में से एक के लिए कोई सीएसएस वर्कअराउंड है?

Question

यहाँ मेरी कोड के साथ एक बेला है: http://jsfiddle.net/kizu/GCahV/ (फ़ायरफ़ॉक्स और किसी भी अन्य आधुनिक ब्राउज़र में इसकी तुलना)

मैं क्या हासिल करना चाहते हैं:

1. वहाँ एक इनलाइन ब्लॉक (या कम से कम एक ब्लॉक होना चाहिए float के साथ) दो भागों के साथ: बाएं और दाएं।
2. ये भाग साइड-बाय-साइड होना चाहिए और लचीला होना चाहिए, सही हिस्सा बिल्कुल अनुपस्थित हो सकता है।
3. मूल ब्लॉक में max-width (% में या px में तय होना चाहिए) होना चाहिए।
4. जब बायां हिस्सा काफी बड़ा होता है, तो यह अतिप्रवाह होना चाहिए, लेकिन सही हिस्सा हमेशा दिखाया जाना चाहिए।

inline-block, float और overflow: hidden का उपयोग करते हुए मैं यह नवीनतम क्रोम, सफारी और ओपेरा में अच्छी तरह से काम किया है, लेकिन तथ्य यह है कि फ़ायरफ़ॉक्स एक बग के साथ मारा: बाएं हिस्से सिकुड़ता है जब सही हिस्सा लंबा है।

मुझे मिला एकमात्र सीएसएस वर्कअराउंड फ्लेक्स-बॉक्स मॉडल में एफएक्स के लिए स्थिति तत्वों को आजमाने का है, लेकिन यह सही नहीं है: मैं माता-पिता को max-width (या width बिल्कुल) नहीं कर सका। http://jsfiddle.net/kizu/GCahV/1/

---

तो, सवाल कर रहे हैं:

1. वहाँ फ़ायरफ़ॉक्स को समझने .b-shrinker के लिए max-width बनाने के लिए एक रास्ता है

   यहाँ मेरी पूरी कोशिश अब तक है?

2. क्या कोई अन्य सीएसएस केवल इस फ़ायरफ़ॉक्स की बग के लिए कामकाज या मैं जो चाहता हूं उसे पूरी तरह से अलग तरीके से काम करता हूं?

Answer 1

ठीक है, तो flexbox साथ एक सा खेलने के साथ मैं कुछ हद तक एक अच्छा समाधान नहीं मिला: http://dabblet.com/gist/4701626

समस्या सिर्फ यह है कि Fx बाएं हिस्से के लिए अंडाकार खो देता है, लेकिन यह एक छोटी सी समस्या है , 'सब कुछ ठीक काम करता है।

तो, यहाँ एक कोड है कि यह तय हो गई है:

.b-wrapper_fixed .b-shrinker__in { 
    display: -moz-box; 
    -moz-box-orient: horizontal; 
    -moz-box-direction : reverse; 
    } 
.b-wrapper_fixed .b-shrinker__left { 
    white-space: normal; 
    word-break: break-all; 
    -moz-box-flex: 1; 
    height: 1.2em; 
    } 
.b-wrapper_fixed .b-shrinker__right { 
    -moz-box-flex: 1; 
    } 

ब्लॉक flexboxy बनाने के अलावा, छोड़ दिया ब्लॉक white-space:normal और word-break: break-all, तो बाएं हिस्से में लंबे सामग्री के लिए नहीं होगा की जरूरत है यह हिस्सा शरीर से लंबा है। और ओवरफ्लोउन सामग्री को छिपाने के लिए, height सेट है।

तो, एकमात्र समस्या शेष गायब इलिप्सिस है, इसलिए अगर किसी को इसका समाधान मिलेगा - तो मैं आभारी रहूंगा।

Answer 2

1. जो मैंने पढ़ा है, एफएक्स संस्करण 1.0 से अधिकतम चौड़ाई को समझता है। https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility। अंडाकार Fx 7.0 से काम करता है। तो यह अभी तक लागू नहीं किया गया है।
2. .b-shrinker { max-width: 100%; width: 100% } दें और यह Fx और WebKit और Opera में अच्छा लगेगा। http://jsfiddle.net/GCahV/11/