क्या फ़ायरफ़ॉक्स समर्थन स्थिति: टेबल तत्वों पर सापेक्ष है?

Question

मैं का उपयोग करने का प्रयास करते हैं position: relative/ position: absoluteएक पर <th>या <td>Firefox में यह काम करने के लिए प्रतीत नहीं होता।

Comments

नहीं, मुझे लगता है कि कोई भी ब्राउज़र ठीक से समर्थन नहीं करता है। यह किसी भी HTML मानक AFAIK

— Pekka

@Pekka: HTML इसमें नहीं आता है, यह CSS है। और आश्चर्यजनक रूप से, यह काम करता है। :-)

— टीजे क्राउडर

WebKit और IE में काम करता है जहाँ तक मैं बता सकता हूँ। फ़ायरफ़ॉक्स केवल एक ही लगता है जो इसे टेबल-सेल पर पसंद नहीं करता है। और हाँ, मैं <td> के अंदर तत्वों को तैरने पर भरोसा किए बिना तत्वों को रखने की कोशिश कर रहा हूँ।

— बेन जॉनसन

फिर से, जस्टिन के जवाब को देखें। यह फ़ायरफ़ॉक्स में ठीक काम करता है यदि आप फ़ायरफ़ॉक्स को बताते हैं कि आप इसे एक टेबल तत्व के बजाय एक ब्लॉक के रूप में मान रहे हैं।

— टीजे क्राउडर

इस प्रश्न में समस्या का प्रदर्शन करने वाला एक jsfiddle: jsfiddle.net/M5P93 IE, Safari, Chrome में काम करता है; फ़ायरफ़ॉक्स विफल रहता है।

— क्रिस मोसची

Answer 1

आसान और सबसे उचित तरीका यह होगा कि कोशिका की सामग्री को एक div में लपेटें और उस स्थिति को जोड़े: जो उस div के सापेक्ष है।

उदाहरण:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

Comments

+1 यह एकमात्र समाधान है जिसने मेरे लिए काम किया। tr {display:block}लेआउट का पूरी तरह से उपयोग करना ।

— वेस्ले मर्च

+1 यह मेरे लिए भी जवाब है। display: blockजटिल टेबल लेआउट पर एक तय करने के लिए पर्याप्त नहीं है। अतिरिक्त div समाधान है जो अधिक विश्वसनीय है।

— डीए।

लेकिन, इस समाधान के साथ "चौड़ाई" और "ऊंचाई" अभी भी इस्तेमाल नहीं किया जा सकता है

— 4esn0k

@ 4esn0k आपको एक समाधान मिला जहां आप चौड़ाई और ऊंचाई का उपयोग कर सकते हैं?

— नील

दुर्भाग्यवश, यदि आप अन्य सामग्री की तुलना में इसमें एक और कॉलम जोड़ते हैं तो आपका समाधान काम नहीं करता है । इसलिए मुझे "स्वीकृत उत्तर" झंडा और वोटों द्वारा दी गई सराहना की समझ नहीं है। कृपया jsfiddle.net/ukR3q

— Jan

Answer 2

यह कोई समस्या नहीं होनी चाहिए। सेट करने के लिए भी याद रखें:

display: block;

Comments

प्रदर्शन सेट करने के लिए नकारात्मक: ब्लॉक ऐसा लगता है कि यह तालिका स्वरूपण के साथ वास्तव में गड़बड़ कर सकता है यदि यह सीधे तत्व पर लागू होता है। क्योंकि यह इसे टेबल-सेल से बदल रहा है ... या मैं पागल हूं?

— बेन जॉनसन

@ बान: ठीक है, हाँ। positionतालिका सेल पर सेट करना , परिभाषा के अनुसार, तालिका स्वरूपण को गंभीरता से बदलना है। आप सेल के ब्लॉक को प्रवाह से बाहर ले जाते हैं (इसके अलावा position: relative, जहां यह प्रवाह में रहता है लेकिन इससे ऑफसेट होता है)।

— टीजे क्राउडर

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

— जस्टिन निस्नर

@ टीजे यह स्थिति नहीं जोड़ रहा है: रिश्तेदार जो दृश्य उपस्थिति को बदल रहा है, यह तालिका-सेल से ब्लॉक करने के लिए th / td को बदल रहा है। फिर से, यह जानकर अच्छा लगा कि यह काम करता है, लेकिन ब्लॉक स्तर के तत्वों को बनाने वाले बहुत सारे मामलों में वास्तव में तालिका स्वरूपण के साथ गड़बड़ हो जाएगी। धन्यवाद जस्टिन!

— बेन जॉनसन

अफसोस, display: blockफ़ायरफ़ॉक्स में भी मुद्दों का कारण बन सकता है - अर्थात् यदि तालिका सेल स्तंभों को फैला रहा है, तो इसे ब्लॉक करने के लिए सेटिंग पहले स्तंभ के नीचे सेल को ध्वस्त कर देगी।

— डीए।

Answer 3

चूंकि इंटरनेट एक्सप्लोरर 7, 8 और 9 सहित हर वेब ब्राउज़र सही ढंग से स्थिति को संभालता है: टेबल-डिस्प्ले तत्व के सापेक्ष और केवल फायरफॉक्स इसे गलत तरीके से संभालता है, आपका सबसे अच्छा शर्त एक जावास्क्रिप्ट शिम का उपयोग करना है। आपको अपने DOM को सिर्फ एक दोषपूर्ण ब्राउज़र के लिए पुनर्व्यवस्थित नहीं करना चाहिए। जब लोग IE कुछ गलत हो जाता है और अन्य सभी ब्राउज़रों इसे सही मिलता है जावास्क्रिप्ट का उपयोग लोग हर समय करते हैं।

यहाँ सभी HTML, CSS और जावास्क्रिप्ट के साथ पूरी तरह से एनोटेटिड jsfiddle है।

http://jsfiddle.net/mrbinky3000/MfWuV/33/

ऊपर मेरा jsfiddle उदाहरण "उत्तरदायी वेब डिज़ाइन" तकनीकों का उपयोग केवल यह दिखाने के लिए करता है कि यह उत्तरदायी लेआउट के साथ काम करेगा। हालाँकि, आपके कोड को उत्तरदायी नहीं होना चाहिए।

यहाँ नीचे जावास्क्रिप्ट है, लेकिन यह संदर्भ से बहुत अधिक समझ में नहीं आएगा। कृपया ऊपर दिए गए jsfiddle लिंक को देखें।

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

Comments

$ .browser को jQuery 1.9

— Matus

हां। तो अपने पसंदीदा ब्राउज़र का पता लगाने की विधि के साथ विकल्प।

— mrbinky3000

ब्राउज़र दोषपूर्ण नहीं है। विनिर्देशन का कहना है कि प्रभाव अपरिभाषित है।

— WGH

@GH समाधान को किसी भी कम सही नहीं बनाता है। चढ़ाव के लिए धन्यवाद।

— mrbinky3000

अरे मैंने अभी-अभी अपनी ओर से एक पॉलीफ़िल बनाई है, इसे देखो! :) github.com/Grawl/gecko-table-position-polyfill

— Даниил Пронин

Answer 4

फ़ायरफ़ॉक्स 30 के साथ शुरू, आप positionटेबल घटकों पर उपयोग कर पाएंगे । आप वर्तमान नाइट बिल्ड (स्टैंडअलोन के रूप में काम करता है) के साथ अपने लिए प्रयास कर सकते हैं: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

परीक्षण का मामला ( http://jsfiddle.net/acbabis/hpWZk/ ):

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

आप यहाँ परिवर्तनों की डेवलपर्स चर्चा का अनुसरण करना जारी रख सकते हैं (विषय 13 वर्ष पुराना है): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

हालिया रिलीज इतिहास को देखते हुए , यह मई 2014 तक उपलब्ध हो सकता है। मैं मुश्किल से अपनी उत्तेजना को शामिल कर सकता हूं!

EDIT (6/10/14): फ़ायरफ़ॉक्स 30 आज जारी किया गया था। जल्द ही, मेज की स्थिति प्रमुख डेस्कटॉप ब्राउज़रों में एक समस्या नहीं होगी

Answer 5

फ़ायरफ़ॉक्स 3.6.13 के अनुसार, स्थिति: सापेक्ष / निरपेक्ष तालिका तत्वों पर काम नहीं करती है। यह लंबे समय से फ़ायरफ़ॉक्स व्यवहार प्रतीत होता है। निम्नलिखित देखें: http://csscreator.com/node/31771

CSS Creator लिंक निम्नलिखित W3C संदर्भ पोस्ट करता है:

टेबल-पंक्ति-समूह, टेबल-हेडर-ग्रुप, टेबल-पाद-समूह, टेबल-पंक्ति, टेबल-कॉलम-समूह, टेबल-कॉलम, टेबल-सेल और टेबल-कैप्शन तत्वों पर 'स्थिति: सापेक्ष' का प्रभाव अपरिभाषित है। http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Comments

देखें जस्टिन का जवाब। यह काम करता है, बशर्ते आप displayसेटिंग बदल दें । जो समझ में आता है (डिग्री सीएसएस समझ में आता है)।

— टीजे क्राउडर

हाँ, यह "काम करता है" सिवाय इसके कि इसे कोशिकाओं पर लागू करने से आपकी तालिका पूरी तरह से खत्म हो जाएगी ... किंडा उस उदाहरण में व्यर्थ है।

— साइमन ईस्ट

Answer 6

display:inline-blockफ़ायरफ़ॉक्स 11 में मेरे लिए काम करने की कोशिश करें मुझे टेबल के लेआउट को नष्ट किए बिना td / th के भीतर स्थिति निर्धारण की क्षमता प्रदान करें। position:relativeचीजों को काम करने के लिए td / th के साथ मिलकर काम करना चाहिए। बस इसे खुद काम करना पड़ा।

Answer 7

मेरे पास एक table-cellतत्व था (जो वास्तव में एक DIVनहीं थाTD )

मैंने प्रतिस्थापित किया

display: table-cell;
position: relative;
left: .5em

(जो क्रोम में काम करता है) के साथ

display: table-cell;
padding-left: .5em

बेशक बॉक्सिंग मॉडल में चौड़ाई के लिए पैडिंग को जोड़ा जाता है - लेकिन जब हमेशा पूर्ण चौड़ाई की बात आती है, तो टेबल को हमेशा अपना दिमाग लगता है - इसलिए यह कुछ मामलों के लिए काम करेगा।

Answer 8

प्रदर्शन जोड़ना: मूल तत्व को ब्लॉक करना यह फ़ायरफ़ॉक्स में काम कर रहा है। मुझे भी शीर्ष जोड़ना था: 0px; बाएं: 0px; Chrome के लिए मूल तत्व काम करने के लिए। IE7, IE8, और IE9 भी काम कर रहे हैं।

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

Answer 9

स्वीकृत समाधान प्रकार काम करता है, लेकिन यदि आप दूसरे कॉलम की तुलना में इसमें अधिक सामग्री के साथ कोई अन्य स्तंभ नहीं जोड़ते हैं। यदि आप height:100%अपने tr , td & div में जोड़ते हैं तो यह काम करना चाहिए।

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

एकमात्र समस्या यह है कि यह केवल एफएफ में कॉलम ऊंचाई की समस्या को ठीक करता है, क्रोम और आईई में नहीं। तो यह एक कदम करीब है, लेकिन सही नहीं है।

मैंने जनवरी से एक फिडेल को अद्यतन किया जो काम करने के लिए स्वीकृत उत्तर के साथ काम नहीं कर रहा था। http://jsfiddle.net/gvcLoz20/