Поддерживает ли Firefox позицию: относительно элементов таблицы?

когда я пытаюсь использовать position: relative / position: absolute на <th> или <td> в Firefox это не работает.

9 ответов


простым и наиболее правильным способом было бы обернуть содержимое ячейки в 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-прокладку. Вам не нужно переставлять DOM только для одного неисправного браузера. Люди используют JavaScript shims все время, когда IE получает что-то не так, и все другие браузеры получают это право.

вот полностью аннотированный jsfiddle со всеми HTML, CSS и JavaScript объяснимый.

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

мой пример jsfiddle выше использует методы "адаптивного веб-дизайна", чтобы показать, что он будет работать с адаптивным макетом. Тем не менее, ваш код не должен быть отзывчивым.

вот 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 года. Я едва сдерживаю волнение!

EDIT (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:relative на td / th должен заставить вещи работать. Только что заработал сам.


Я table-cell элемент (который на самом деле был DIV не TD)

Я заменил

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

(который работал в Chrome) с

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

конечно, заполнение обычно добавляется к ширине в модели коробки-но таблицы всегда, похоже, имеют свой собственный ум, когда дело доходит до абсолютной ширины - так что это будет работать в некоторых случаях.


добавление дисплея: блок к родительскому элементу получил эту работу в firefox. Мне также пришлось добавить top:0px; left: 0px; к родительскому элементу для работы Chrome. ИЕ7, ИЕ8, & ИЕ9 также работает.

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