Нещодавно зіткнувся з проблемою абсолютного позиціонування елементів всередині div-а, наприклад, з властивістю display:table-cell; та position:relative; у браузері Mozilla Firefox.
Про що йде мова. Ми хочемо зробити таблицю з div-ів:
Нехай в нас є div (display:table-row), а в ньому 2 div-а (display:table-cell), і водного з них властивість position:relative; В div з position:relative ми хочемо запхати ще один – з властивістю position:absolute. Так от, по всім правилам, div з position:absolute мав би вирівнюватись відносно першого батьківського елемента з position:relative, а чомусь в Mozilla він не підається цьому правилу. І позиціонується абсолютно від наступного батьківського елемента. У всіх інших браузерах все нормально. (Opera, IE (8-10), Chrome, Safari).
Отже маємо код html:
|
1 2 3 4 5 6 7 8 9 |
<div class="content"> <div class="tableRow"> <div class="tableCell cellA" <span>aaaaaaaa</span> <div class="posAbs">beer</div> </div> <div class="tableCell cellB">bbbbbbbbbbbbb</br>bbbbbbbbbbbb b<br/>bbb bbbbbbbbbbb</div> </div> </div> |
І до нього код css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.content { display:table; width:300px; margin:0 auto; } .tableRow { display:table-row; background:red; } .tableCell { display:table-cell; width:50%; vertical-align:middle; text-align:center; } .tableCell.cellA { background:yellow; position:relative; } .tableCell.cellB { background:green; } .posAbs { position:absolute; right:5px; top:5px; background:red; color:white; padding:3px; } |
Результатом у всіх вищевказаних браузерах, крім Mozilla Firefox буде наступна табличка:
Переконатись ви також можете наживо – http://jsfiddle.net/acsy/abhJz/6/
Що ж робити з мозіллою?
Нажаль, на даний момент я незнайшов вирішення проблеми (. Може хтось щось підкаже, є ідеї?