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

Question

Я не могу понять эту проблему позиционирования в 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 не сдвинется с места.

Answer 1

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

http://jsfiddle.net/GchWZ/

Это лучше и более «правильное» пользователь внутренний ДИВ, хотя, как цитата из этого переполнения стека поста: Does Firefox support position: relative on table elements?

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

Answer 2

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

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

Answer 3

Помимо дублированного ID вопроса отметил Брандт, назначая positioning to table cells is dodgy at best - Я удивлен, что он работает в любых браузерах. Если необходимо использовать таблицу, завернуть элементы, которые вы хотите расположить в 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; 
} 

Answer 4

Попробуйте это:

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

Answer 5

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

Answer 6

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

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

Answer 7

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

1. Использовать оболочку div (div.inner) внутри вашего td, которая имеет положение = относительный стиль в td. Внутри обертки я добавил 2 divs, которые должны располагаться в верхней и нижней частях ячейки.

2. Позиционирование в верхней части (класс = интервал-старт) осуществляется через CSS-позиционирование.

3. Позиционирование конца div.interval внизу выполняется через скрипт, который добавляет стиль, показанный на картинке. С переменными td-высотами и div-оболочкой по умолчанию используется 0-высота, вам нужно указать, как далеко он должен идти в нижней части. Сценарий выглядит следующим образом:

    $("table .inner .interval-end").each(function() { 
         $(this).css({top: ($(this).parent().parent().height() - 10) + "px"}) 
        }).show() 
   

4. Первоначально я сделал div.interval конец невидимым, установите «сверху» стиль, а затем сделал его видимым с помощью Jquery шоу().

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