Firefox có hỗ trợ vị trí: tương đối trên các thành phần bảng không?

Khi tôi cố gắng sử dụng position: relative/ position: absolutetrên một <th>hoặc <td>trong Firefox, nó dường như không hoạt động.

Cách dễ dàng và đúng đắn nhất sẽ là bọc nội dung của ô trong một div và thêm vị trí: liên quan đến div đó.

thí dụ:

<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>

Điều đó sẽ không có vấn đề gì. Nhớ cũng đặt:

display: block;

Vì mọi trình duyệt web bao gồm Internet Explorer 7, 8 và 9 xử lý chính xác vị trí: tương đối trên một yếu tố hiển thị bảng và chỉ FireFox xử lý không chính xác, nên cách tốt nhất của bạn là sử dụng shim JavaScript. Bạn không cần phải sắp xếp lại DOM của mình chỉ vì một trình duyệt bị lỗi. Mọi người sử dụng JavaScript che chắn mọi lúc khi IE gặp lỗi và tất cả các trình duyệt khác đều đúng.

Dưới đây là một jsfiddle hoàn toàn có chú thích với tất cả các HTML, CSS và JavaScript được giải thích.

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

Ví dụ jsfiddle của tôi ở trên sử dụng các kỹ thuật "Responsive Web Design" chỉ để cho thấy rằng nó sẽ hoạt động với bố cục đáp ứng. Tuy nhiên, mã của bạn không cần phải phản hồi.

Dưới đây là JavaScript bên dưới, nhưng nó sẽ không có ý nghĩa nhiều trong bối cảnh. Vui lòng kiểm tra liên kết jsfiddle ở trên.

$(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();

    }

});

Bắt đầu với Firefox 30, bạn sẽ có thể sử dụng positiontrên các thành phần bảng. Bạn có thể tự mình thử với bản dựng hàng đêm hiện tại (hoạt động dưới dạng độc lập): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Trường hợp thử nghiệm ( 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>

Bạn có thể tiếp tục theo thảo luận của nhà phát triển trong những thay đổi ở đây (chủ đề là 13 năm tuổi): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Đánh giá theo lịch sử phát hành gần đây , điều này có thể có sẵn ngay sau tháng 5 năm 2014. Tôi hầu như không thể kiềm chế sự phấn khích của mình!

EDIT (6/10/14): Firefox 30 đã được phát hành ngày hôm nay. Ngay sau đó, định vị bảng sẽ không là vấn đề trong các trình duyệt máy tính để bàn chính

Kể từ Firefox 3.6.13, vị trí: tương đối / tuyệt đối dường như không hoạt động trên các phần tử bảng. Điều này dường như là hành vi lâu dài của Firefox. Xem như sau: http://csscreator.com/node/31771

Liên kết CSS Creator đăng tham chiếu W3C sau:

Tác động của 'vị trí: tương đối' đối với nhóm bảng hàng, nhóm tiêu đề bảng, nhóm chân trang, nhóm hàng, bảng cột, nhóm bảng, cột bảng, ô bảng và các yếu tố chú thích bảng không định nghĩa được. http://www.w3.org/TR/CSS21/visuren.html#poseitioning-scheme

Hãy thử sử dụng display:inline-blocknó hoạt động với tôi trong Firefox 11 cho tôi khả năng định vị trong td / th mà không phá hủy bố cục của bảng. Điều đó kết hợp với position:relativetrên một td / th nên làm cho mọi thứ hoạt động. Chỉ cần nó làm việc bản thân mình.

Tôi đã có một table-cellyếu tố (mà thực sự DIVkhông phải là một TD)

tôi đã thay thế

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

(đã hoạt động trong Chrome) với

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

Tất nhiên phần đệm thường được thêm vào chiều rộng trong mô hình hộp - nhưng các bảng dường như luôn có ý nghĩ của riêng chúng khi nói đến độ rộng tuyệt đối - vì vậy điều này sẽ hoạt động trong một số trường hợp.

Thêm hiển thị: khối cho phần tử cha đã làm việc này trong firefox. Tôi cũng đã phải thêm top: 0px; trái: 0px; thành phần chính để Chrome hoạt động. IE7, IE8, & IE9 cũng đang hoạt động.

<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>

Loại giải pháp được chấp nhận, nhưng không phải nếu bạn thêm một cột khác có nhiều nội dung trong đó hơn là một cột khác. Nếu bạn thêm height:100%vào tr , td & div thì nó sẽ hoạt động.

<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>

Vấn đề duy nhất là điều này chỉ khắc phục vấn đề chiều cao cột trong FF, không phải trong Chrome và IE. Vì vậy, đó là một bước gần hơn, nhưng không hoàn hảo.

Tôi đã cập nhật một câu đố từ Jan không hoạt động với câu trả lời được chấp nhận để cho thấy nó hoạt động. http://jsfiddle.net/gvcLoz20/