डिस्प्ले: टेबल-सेल क्रोम में काम करना फ़ायरफ़ॉक्स में काम नहीं कर रहा है [बंद] - एचटीएमएल, सीएसएस

इसलिए जो मैं कह सकता हूं उससे यह लगता है कि डिस्प्ले: टेबल-सेल फ़ायरफ़ॉक्स में मेरे लिए काम नहीं कर रहा है जैसा कि इसे करना चाहिए। क्रोम और सफारी में यह ठीक काम करता है।

कोई विचार?

ईटीए: "सेवा-सेक्शन" में दो सेवाएं हैं जिन्हें "सेवाएं-आधा" कहा जाता है। बाएं कॉलम 400px चौड़ा होना चाहिए। क्रोम में ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स में कॉलम केवल 100 या तो पिक्सल चौड़ा है। सोचें कि इसे डिस्प्ले के साथ करना है: फ़ायरफ़ॉक्स में टेबल-सेल।

चूंकि लोग कह रहे थे कि वे समस्या को दोहराने में सक्षम नहीं हैं, मैंने स्क्रीनफ्लो से स्क्रीनशॉट अपलोड करने का निर्णय लिया है ताकि यह दिखाया जा सके कि क्रोम और फ़ायरफ़ॉक्स के बीच लेआउट अलग दिखता है।

उत्तर:

टिप्पणियों में सुझाए गए आपकी मूल समस्या यह है कि आपको इसके लिए टेबल लेआउट का उपयोग नहीं करना चाहिए। तालिका लेआउट टैब्यूलर डेटा डालने के लिए हैं, जो यह नहीं है।

ब्राउज़रों की एक निश्चित मात्रा में लचीलापन हैजब टेबल को बिछाने की बात आती है क्योंकि स्पेक अपेक्षाकृत ढीला होता है, जो आप अलग-अलग ब्राउज़रों पर देख रहे अंतरों के लिए खाते हैं। एक बार जब आप उपयोग करते हैं table-cell प्रतिपादन, ब्राउज़र अपने स्वयं के एल्गोरिदम के अनुसार अंतरिक्ष का पुन: विस्तार कर सकता है।

मैं फ्लेक्सबॉक्स जैसे किसी अन्य लेआउट तंत्र का उपयोग करने की दृढ़ता से अनुशंसा करता हूं, लेकिन यदि आप "टेबल लेआउट के साथ चिपकने के लिए दृढ़ संकल्प रखते हैं, तो आप इसका उपयोग कर सकते हैं style="min-width:400px" अपने विशिष्ट मुद्दे को ठीक करने के लिए।

का उपयोग करते हुए position: relative पर table-cell जैसा कि आपके पास सही है, आपको भी समस्याएं आ रही हैं, इसलिए आपको उस संयोजन पर पुनर्विचार करना चाहिए।