Абсолютное позиционирование CSS в ячейках таблицы, не работающих в Firefox

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

JS Fiddle:

Оригинал - http://jsfiddle.net/g9qzh/

Обновлено - http://jsfiddle.net/g9qzh/2/

Работает в IE, Chrome, Safari, Opera

Вот реальный код. Дайте мне знать, если я не буду следовать стандарту, о котором я не знаю.

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

Моя единственная подсказка заключается в том, что есть некоторая другая ценность, которую я должен назначить td, которая заставит ее работать. В некоторых других вопросах, связанных с stackoverflow, упоминалось, что Firefox плохо себя ведет с этим, но я не смог найти ответ. Я попытался присвоить как верхние, так и левые значения нуля, но FF не сдвинется с места.

Ответ 1

Изменить идентификатор на классы, а также отобразить его как блоки, он исправляет его:

http://jsfiddle.net/GchWZ/

Лучше и более "правильно" для пользователя внутренний div, хотя, как указано в этом столбце переполнения: Поддерживает ли Firefox позицию: относительная по элементам таблицы?

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

Ответ 2

Вы используете идентификаторы

Идентификаторы уникальны. Используйте классы, если вы хотите повторно использовать назначение стиля.

Ответ 3

Попробуйте следующее:

<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>

и для css:

#two {
    position: absolute;
    top: 0px;
}

#wrapper {
    position: relative;
}

Ответ 4

Проблема связана с тем, как FF создает таблицы. Если вы установите TD на display:inline-block;, он должен отображаться правильно.

Ответ 5

Помимо дублированной проблемы ID, отмеченной Brandt, назначение позиционирования в ячейки таблицы является хитроумным в лучшем случае - я удивлен, что он работает в любых браузерах. Если вы должны использовать таблицу, оберните элементы, которые вы хотите поместить в div, и назначьте обертку div position: relative:

<table>
    <tr>
        <td>
        <div class="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
        </td>
    <tr>
</table>

CSS

#two {
   position: absolute;
   top: 0;
}
.wrapper {
   position: relative;
}

Ответ 6

Если вы хотите разместить материал сверху и снизу ячейки, а также в Firefox, я сделал это, выполнив следующее сочетание CSS и (к сожалению) jQuery.

Используйте оболочку div (div.inner) внутри вашего td, которая имеет положение = относительный стиль в td. Внутри обертки я добавил 2 divs, которые должны располагаться в верхней и нижней частях ячейки.
Позиционирование в верхней части (class= interval-start) выполняется с помощью CSS-позиционирования.
Позиционирование конца div.interval внизу выполняется через script, что добавляет стиль, показанный на рисунке. С переменными td-высотами и div-оболочкой по умолчанию используется 0-высота, вам нужно указать, как далеко он должен идти в нижней части. script выглядит следующим образом:
```
        $("table .inner .interval-end").each(function () {
            $(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
        }).show()
```
Сначала я сделал div.interval-end невидимым, установил стиль "top", а затем сделал его видимым с помощью jQuery show().

Надеюсь, это поможет любому, кто пытается достичь того же. Дайте мне знать, есть ли там лучшие методы, особенно если эти методы не требуют написания сценариев. BTW: Я попробовал установить стиль высоты оболочки div.inner, но это противоречит макете таблицы в Firefox.

Ответ 7

Есть законные основания использовать отображение CSS: стиль таблицы. Он устраняет проблемы, которые отображаются: блок и отображение: встроенный блок не адресуется. Эти причины занимают целую главу книги по стилю CSS, поэтому я не буду вдаваться в них здесь. В той же книге также описывается проблема позиционирования внутри элементов с этим типом отображения. Спецификации CSS 2.1 просто не решают проблему, и Mozilla выбрала курс, который игнорирует попытки создать контекст позиционирования с этими элементами. Позиционирование CSS-таблицы хорошо установлено, зрелая методология, а не "изворотливость" - она просто понимает свои пределы - как и любой другой элемент CSS. Для жидкостных макетов и других макетов, где размер элемента является переменным или неизвестным, он незаменим для вертикального расстояния и позиционирования.

Было представлено одно предложение в этом потоке - создайте div в элементе "table-cell", установленном в положение: относительное и используемое для контекста позиционирования. Другой метод - вставить еще одну таблицу CSS в эту ячейку и использовать ее для размещения элементов в сетке. Третий метод заключается в том, чтобы обернуть вашу таблицу CSS в другой элемент, который создает контекст позиционирования.