Что-то не так с CSS сверху и слева от IE?

Question

Следующий код jQuery прекрасно работает для меня с Safari, Opera, FF2 и FF3. Он помещает занятый DIV (с анимированным занятым GIF) поверх элемента FORM на моей веб-странице. Проблема заключается в том, что в IE6 и IE7 он правильно получает ширину и высоту, но, похоже, не достигает вершины и левого угла. В чем подвох?

var nH = $('#' + sForm).attr('offsetHeight');
var nW = $('#' + sForm).attr('offsetWidth');
var nT = $('#' + sForm).attr('offsetTop');
var nL = $('#' + sForm).attr('offsetLeft');

$('#busy')
    .css('position','absolute')
    .css('height', nH + 'px')
    .css('width', nW + 'px')
    .css('top', nT + 'px')
    .css('left', nL + 'px')
    .show();

Обратите внимание, что на моей странице есть несколько элементов FORM. (Причина занятого GIF заключается в том, что я отправляю AJAX-сообщение в фоновом режиме при отправке формы.)

Примечание. Я также попробовал значение .position() в плагине jQuery Dimensions 1.2 для верхнего и левого верхних слоев, и это помогло, но, как мне показалось, значение top становилось больше по мере того, как я перемещался вниз по странице.

Answer 1

Прямо сейчас jQuery (последняя публичная версия) включает измерения в качестве основных функций.

Попробуйте использовать $ (element) .offset () (он возвращает объект со свойствами left и top). Я часто его использую и прекрасно работает во многих браузерах (т.е. 6/7, опера, сафари, хром, ff2 / 3)

Answer 2

Вы уверены, что элемент установлен на display: block? Также вы можете избежать нескольких вызовов функции css, передавая хеш-код, подобный следующему:

$('#busy')
    .css({'position':'absolute',
          'height': nH + 'px',
          'width', nW + 'px',
          'top', nT + 'px',
          'left', nL + 'px'})
    .show();

Answer 3

Я получил его для работы со значением .position () плагина jQuery Dimensions 1.2 для верхней и левой частей. (Он возвращает массив, в котором вы можете получить значения верхнего и левого массивов.) Исправление заключалось в том, что мне пришлось отловить IE6 и просто вычесть некоторое фиксированное число (12 пикселей в моем случае) для верха и добавить это же число по высоте. В IE7 я мог делать то же самое, но по каким-то причинам приходилось по-разному вычислять высоту и высоту на первых 200 пикселях или меньше. Ваша ситуация может отличаться, в зависимости от вашего предыдущего CSS, вашего reset.css и т. Д.