Поддерживает ли 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-прокладки все время, когда в 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 года. Я едва сдерживаю свое волнение!
РЕДАКТИРОВАТЬ (6/10/14): Firefox 30 был выпущен сегодня. Вскоре позиционирование таблиц не станет проблемой в основных настольных браузерах
Начиная с Firefox 3.6.13, положение: относительное / абсолютное не похоже на элементы таблицы. Это, кажется, давнишнее поведение Firefox. Смотрите следующее: http://csscreator.com/node/31771
Ссылка CSS Creator публикует следующую ссылку на W3C:
Влияние 'position:lative' на элементы table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell и заголовок таблицы не определено http://www.w3.org/TR/CSS21/visuren.html
Попробуйте использовать display:inline-block
это сработало для меня в Firefox 11, что дало мне возможность позиционирования в тд / т, не разрушая раскладку стола. Это в сочетании с position:relative
на тд / й должен заставить вещи работать. Просто получил это работает сам.
У меня есть table-cell
элемент (который был на самом деле DIV
не TD
)
Я заменил
display: table-cell;
position: relative;
left: .5em
(который работал в Chrome) с
display: table-cell;
padding-left: .5em
Конечно, отступы обычно добавляются к ширине в блочной модели - но таблицы, кажется, всегда имеют собственный разум, когда дело доходит до абсолютной ширины - так что это будет работать в некоторых случаях.
Приемлемое решение работает, но если вы добавляете еще один столбец с большим содержанием, чем в другом. Если вы добавите 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/
Добавление display:block к родительскому элементу сделало это работающим в Firefox. Я также должен был добавить top: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>