Как я могу поместить элемент в нижней части своего контейнера в Firefox?

У меня есть ячейка таблицы, и я хочу, чтобы div внутри него всегда находился в нижнем левом углу. В IE и Safari работает отлично, но Firefox позиционирует div абсолютно на странице, а не внутри ячейки (код на основе решения здесь). Я тестировал как с DTD, так и без него, которые помещают Firefox в режим Quirks и режим Стандартов, и ни одна из них не работает должным образом. Я застрял - любые идеи?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px; }
        th, td { vertical-align: top; border:1px solid black; position:relative; }
        th { width:100px; }
        .manage { text-align:right; position:absolute; bottom:0; right:0; }
        </style>
    </head>
    <body >
    <table>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table>
    </body>
</html>

Ответ 1

Согласно W3C, позиция: relative не влияет на ячейки таблицы:

"Эффект" position: relative "on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, элементы table-cell и table-caption undefined."

Решение состоит в том, чтобы добавить дополнительный разделитель div в ячейку таблицы.

EDIT: Этот div требует установки height:100% и position:relative;.

<table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>

Ответ 2

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px;  }
        th, td { vertical-align: top; border:1px solid black; }
        th { width:100px; }
        div.body {position:relative; width:500px;}
        .manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
        </style>
    </head>
    <body >
    <div class="body"><table>
        <tr>
                <th>Some info about the following thing and this is actually going to span a few lines</th>
                <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table></div>
    </body>
</html>

Ответ 3

Поместите a display:block в таблицу, и теперь FF уважает позицию: relative.

Ответ 4

position: relative, по-видимому, не поддерживается глобально для тега td. К сожалению, я не смог найти окончательные источники.

Возможно, вы захотите поместить блок div в td с нужным размером и применить вместо него position: relative.

Ответ 5

Это может показаться действительно очевидным, но попробовали ли вы использовать vertical-align: bottom; в .manage?

Ответ 6

имеют DIV внутри TD с шириной: 100% и высотой: 100%, затем установите для позиции: относительный.

Ответ 7

Вправо, позиция: relative не влияет на элементы таблицы, а firefox применяет это правило. Решение div работает, но это ужасная разметка, на мой взгляд.

Вам нужно использовать таблицу для отображения этого контента? (Или это относительный?)

Если нет, почему бы вам не использовать элементы div и делать то, что вы хотите?

Чтобы использовать таблицы для макета, так это 1998...