DIV over table cell (Firefox issue)

Question

Я хочу, чтобы div отображался над ячейкой таблицы (заполняя все пространство ячейки, div width = 100% и height = 100%) при событии mouseover.

В IE8 и Chrome это похоже, что я хочу, но в Firefox div появляется за пределами ячейки таблицы.

Code example on jsfiddle

Answer 1

используется position: relative; на td элемента. Firefox игнорирует это значение в ячейках таблицы, см. this bug.

Чтобы обойти этот beahaviour, вы можете создать единственный ребенок из td, который служит в качестве обертки.

<td> 
    <div class="table-cell-wrapper">Your absolute positioned content here</div> 
</td> 

И с помощью этого CSS вы придаете оболочке размеры ячейки таблицы.

.table-cell-wrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

Я обновил YOUT jsfiddle здесь http://jsfiddle.net/RDq8Q/2/. Вам нужно снова настроить точный позиционирование, но теперь вы накладываете наложения.