Firefox รองรับตำแหน่ง: สัมพันธ์กับองค์ประกอบตารางหรือไม่

เมื่อฉันพยายามใช้position: relative/ position: absoluteบน<th>หรือ<td>ใน Firefox ดูเหมือนว่าจะไม่ทำงาน

วิธีที่ง่ายและเหมาะสมที่สุดคือการห่อเนื้อหาของเซลล์ใน 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>

นั่นน่าจะไม่มีปัญหา อย่าลืมตั้งค่า:

display: block;

เนื่องจากทุกเว็บเบราว์เซอร์รวมถึง Internet Explorer 7, 8 และ 9 จัดการตำแหน่งได้อย่างถูกต้อง: สัมพันธ์กับองค์ประกอบที่แสดงบนโต๊ะและมีเพียง FireFox เท่านั้นที่จัดการสิ่งนี้ไม่ถูกต้องทางออกที่ดีที่สุดของคุณคือการใช้ JavaScript shim คุณไม่จำเป็นต้องจัดเรียง DOM ของคุณใหม่สำหรับเบราว์เซอร์ที่เสียเพียงครั้งเดียว ผู้คนใช้ JavaScript ตลอดเวลาเมื่อ IE เกิดความผิดพลาดและเบราว์เซอร์อื่นทั้งหมดทำให้ถูกต้อง

นี่คือ jsfiddle ที่มีคำอธิบายประกอบอย่างสมบูรณ์พร้อมอธิบาย HTML, CSS และ JavaScript ทั้งหมด

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

ตัวอย่าง jsfiddle ของฉันด้านบนใช้เทคนิค "Responsive Web Design" เพียงเพื่อแสดงว่ามันจะทำงานกับเลย์เอาต์ที่ตอบสนองได้ อย่างไรก็ตามรหัสของคุณไม่จำเป็นต้องตอบสนอง

นี่คือ JavaScript ด้านล่าง แต่จะไม่ทำให้เกิดความเข้าใจผิด โปรดตรวจสอบลิงก์ 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();

    }

});

เริ่มต้นด้วย Firefox 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 ฉันแทบจะไม่สามารถมีความตื่นเต้นของฉัน!

แก้ไข (6/10/14): Firefox 30 เปิดตัวในวันนี้ ในไม่ช้าการวางตำแหน่งของตารางจะไม่มีปัญหาในเบราว์เซอร์เดสก์ท็อปหลัก

ในฐานะของ Firefox 3.6.13 ตำแหน่ง: สัมพัทธ์ / สัมบูรณ์ดูเหมือนจะไม่ทำงานบนองค์ประกอบตาราง ดูเหมือนว่าพฤติกรรม Firefox จะยืนยาว ดูต่อไปนี้: http://csscreator.com/node/31771

ลิงก์ CSS Creator โพสต์การอ้างอิง W3C ต่อไปนี้:

ผลของ 'ตำแหน่ง: สัมพัทธ์' บนตารางกลุ่ม, ส่วนหัวของตาราง, กลุ่มท้ายตาราง, ตารางแถว, กลุ่มตารางคอลัมน์, กลุ่มคอลัมน์, ตารางเซลล์, และตารางคำอธิบายภาพ ไม่ได้กำหนด http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

ลองใช้display:inline-blockมันใช้งานได้สำหรับฉันใน Firefox 11 ทำให้ฉันมีความสามารถในการกำหนดตำแหน่งภายใน td / th โดยไม่ทำลายเค้าโครงของตาราง ที่ร่วมกับposition:relativetd / th ควรทำให้สิ่งต่าง ๆ ทำงานได้ เพิ่งได้รับมันทำงานด้วยตัวเอง

ฉันมีtable-cellองค์ประกอบ (ซึ่งจริง ๆ แล้วDIVไม่ใช่TD)

ฉันแทนที่

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

(ซึ่งทำงานใน Chrome) ด้วย

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

แน่นอนว่าการเติมเต็มมักจะเพิ่มความกว้างในรูปแบบกล่อง - แต่ตารางดูเหมือนจะมีความคิดของตัวเองเมื่อมันมาถึงความกว้างแน่นอน - ดังนั้นสิ่งนี้จะใช้ได้ในบางกรณี

การเพิ่มส่วนแสดงผล: บล็อกองค์ประกอบหลักทำให้การทำงานใน firefox นี้ ฉันต้องเพิ่มด้านบน: 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>

ชนิดของโซลูชันที่ยอมรับ แต่ไม่ใช่ถ้าคุณเพิ่มคอลัมน์อื่นที่มีเนื้อหามากกว่านั้นในคอลัมน์อื่น หากคุณเพิ่มลง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>

ปัญหาเดียวก็คือการแก้ไขปัญหาความสูงคอลัมน์ใน FF เท่านั้นไม่ใช่ใน Chrome และ IE มันใกล้เข้ามาแล้ว แต่ก็ไม่สมบูรณ์แบบ

ฉันอัพเดทซอจาก ม.ค. ซึ่งไม่ได้ทำงานกับคำตอบที่ยอมรับเพื่อแสดงว่าทำงานได้ http://jsfiddle.net/gvcLoz20/