Поскольку каждый веб-браузер, включая Internet Explorer 7, 8 и 9, правильно обрабатывает положение: относительно элемента таблицы и только FireFox обрабатывает это неправильно, лучшим вариантом будет использование JavaScript-прокладки.Вам не нужно переставлять DOM только для одного неисправного браузера.Люди используют JavaScript-прокладки все время, когда IE что-то не так, а все другие браузеры понимают это правильно.
Вот полностью аннотированный jsfiddle со всеми объясненными HTML, CSS и JavaScript.
http://jsfiddle.net/mrbinky3000/MfWuV/33/
В приведенном выше примере с jsfiddle используются методы «адаптивного веб-дизайна», чтобы показать, что он будет работать с адаптивным макетом.Тем не менее, ваш код не должен быть отзывчивым.
Вот код JavaScript ниже, но он не будет иметь особого смысла вне контекста.Пожалуйста, проверьте ссылку jsfiddle выше.
$(function() {
// FireFox Shim
// FireFox is the *only* browser that doesn't support position:relative for
// block elements with display set to "table-cell." Use javascript to add
// an inner div to that block and set the width and height via script.
if ($.browser.mozilla) {
// wrap the insides of the "table cell"
$('#test').wrapInner('<div class="ffpad"></div>');
function ffpad() {
var $ffpad = $('.ffpad'),
$parent = $('.ffpad').parent(),
w, h;
// remove any height that we gave ffpad so the browser can adjust size naturally.
$ffpad.height(0);
// Only do stuff if the immediate parent has a display of "table-cell". We do this to
// play nicely with responsive design.
if ($parent.css('display') == 'table-cell') {
// include any padding, border, margin of the parent
h = $parent.outerHeight();
// set the height of our ffpad div
$ffpad.height(h);
}
}
// be nice to fluid / responsive designs
$(window).on('resize', function() {
ffpad();
});
// called only on first page load
ffpad();
}
});