फ़ायरफ़ॉक्स में पोजिशनिंग समस्याएं? स्थिति: डिस्प्ले के सापेक्ष: तालिका तत्व

Question

मुझे अजीब स्थिति की समस्या का सामना करना पड़ रहा है जो केवल फ़ायरफ़ॉक्स में दिखाई देता है।

मेरे HTML:

<article id="one" class="layer"></article> 
<article id="two" class="layer"></article> 
<article id="three" class="layer"> 
    <div class="left"></div> 
    <div class="right"></div> 
</article> 

मेरे सीएसएस:

html, body { 
    margin: 0; padding: 0; 
    height: 100%; 
    width: 100%; 
} 

article.layer { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

article .left, article .right { 
    position:absolute; 
    width: 50%; 
    height: 100%; 
    min-height:100%; 
    display:table; 
} 

article .left { left: 0; top: 0; } 
article .right { left: 50%; top: 0; } 

तो प्रत्येक लेख display:table और 100% चौड़ाई और 100% ऊंचाई को तैयार है। शरीर और एचटीएमएल भी 100% चौड़ा और उच्च है। इसलिए प्रत्येक लेख बिल्कुल वर्तमान ब्राउज़रविंड का आकार है।

ध्यान दें कि प्रत्येक article.layerposition:relative पर सेट है।

नवीनतम आलेख में div एस है, इसमें absolute स्थान दिया गया है, इसलिए कोई भी बाईं ओर और दाईं ओर स्थित है।

फ़ायरफ़ॉक्स को छोड़कर यह सभी ब्राउज़रों में ठीक काम करता है। Firefox में div.left और पिछले लेख के div.right शीर्ष पर दिखाए जाते हैं और पहला लेख ओवरले ...

यहाँ एक लाइव डेमो है: http://jsbin.com/ubulot/edit#preview टेस्ट यह फ़ायरफ़ॉक्स में और आप समस्या को देखते हैं। मेरे पास मैक पर एफएफ 9.0.1 स्थापित है।

कोई विचार क्या मैं यहां गलत कर रहा हूं?

Answer 1

यदि आप display:tabledisplay:block पर display:block बदलते हैं, तो यह ठीक है, क्योंकि आप here देख सकते हैं। क्या कोई कारण है कि आप display:table का उपयोग कर रहे हैं?

Answer 2

मैं प्रदर्शन का उपयोग कर रहा हूं: तालिका स्वयं। यह कुछ लेआउट मुद्दों के लिए एक कार्य-आसपास है जो प्रदर्शित करता है: ब्लॉक पर्याप्त रूप से निपटने में विफल रहता है। तर्क लंबा है और मैं यहां इसमें नहीं जा रहा हूं।

यह वर्तमान एचटीएमएल 4/5 विनिर्देश का एक परिणाम है जो "प्रदर्शन: तालिका {-x};" के संबंध में कुछ व्यवहार को परिभाषित नहीं करता है। और स्थिति।

किताब से "सब कुछ आप सीएसएस के बारे में पता गलत है" राहेल एंड्रयू द्वारा & केविन झटका:

एक आम बात है जब एक ब्लॉक तत्व भीतर स्थिति से निपटने की स्थापना करके एक नया स्थिति संदर्भ बनाने के लिए है स्थिति ब्लॉक तत्व की संपत्ति रिश्तेदार को। यह हमें ब्लॉक के भीतर तत्वों को स्थानांतरित करने की अनुमति देता है, इसके शीर्ष, दाएं, नीचे, या बाईं ओर। हालांकि, स्थिति निर्धारित करते समय: रिश्तेदार; एक तत्व पर में एक तालिका-संबंधित प्रदर्शन मान भी निर्दिष्ट है, स्थिति अनदेखा है। इस व्यवहार को पहले एलिस्टेयर कैंपबेल द्वारा दस्तावेज किया गया है, जो अपने लेख में सीएसएस 2 बताता है।

स्थिति का प्रभाव:: तालिका पंक्ति-समूह पर रिश्तेदार, टेबल हैडर-समूह, टेबल 1 कल्पना क्या ब्राउज़रों जब एक तत्व एक मेज तत्व के रूप में प्रदर्शित अपेक्षाकृत स्थिति में है क्या करना चाहिए पर स्पष्ट नहीं है पाद लेख समूह, तालिका-पंक्ति, तालिका-कॉलम समूह, तालिका-कॉलम, तालिका-कक्ष, और तालिका-कैप्शनमेंट्स अपरिभाषित है।

यह व्यवहार, सीएसएस टेबल लेआउट के लिए उपयोग करने के साथ सबसे बड़ी समस्या यह मेरी राय में, है ...

जाहिर है मोज़िला बस सीएसएस तालिका तत्वों का उपयोग कर एक स्थिति प्रसंग स्थापित करने का कोई भी प्रयास पर ध्यान नहीं देता।

वहाँ सीएसएस तालिकाओं का उपयोग इस समस्या को ठीक करने के लिए कोई स्पष्ट दृष्टिकोण है, लेकिन हम एक स्थिति संदर्भ प्रदान करने के लिए दो सरल तरीकों में से एक ले जा सकते हैं:

एक ही संदर्भ दो सुझाव के साथ जारी एक तैनात बच्चे खंड जोड़ें सेल के लिए तत्व, या एक तैनात तत्व में तालिका लपेटें।

इस के लिए कोई सुरुचिपूर्ण समाधान नहीं है। इसके लिए मामले के मामले-दर-मामले मूल्यांकन और एक अनुरूप कामकाज की आवश्यकता होती है। :(

अपने मामले में आप के रूप में अच्छी बंद छोड़ सकते हैं। "स्थिति: रिश्तेदार" अपने "परत" कक्षा से बाहर यह व्यर्थ फ़ायरफ़ॉक्स करने के लिए

चूंकि आप एक के रूप में "परत" वर्ग बना लिया है। मेज, सरल बनाने के पिछले उदाहरण में रों "प्रदर्शन: तालिका सेल," में से प्रत्येक।: भी

.Layer:last-of-type > div 
{ 
display: table-cell; 
/* Other formatting here. */ 
}