JQuery.css(): Firefox не возвращает значения "auto"

Я устанавливаю верхние или нижние и левые или правые значения в несколько элементов. Когда я пытаюсь получить доступ к этим значениям с помощью Firefox (16.0.2), я получаю неправильное значение для top (конкретное значение вместо auto)

CSS

div {
    bottom:200px;
    left:0px;
    top:auto;
    right:auto;
}

$(function(){
    var top = $('div').css('top');
    alert(top);
});

Вы можете попробовать его здесь: http://jsfiddle.net/UEyxD/2/ (хорошо работает в Chrome/Safari)

Любые идеи, как предотвратить это? Я хочу получить

Ответы

Ответ 1

Это зависит от браузера и того, как он интерпретирует стили, он несколько не поддается контролю. Однако, с общими обходами CSS и jQuery вы сможете обойти это. Например, если вам не нужно полностью позиционировать элемент, вы можете удалить его или изменить на position:static;

Посмотрите на question.

Что касается того, почему Chrome и IE возвращают разные значения:.css() предоставляет унифицированный шлюз для функций вычисленного стиля браузеров, но он не унифицирует способ фактического вычисления браузером стиля. Это нередко для браузеров по-разному решать такие случаи кросс.

Ответ 2

У меня также была эта неприятная проблема.

Некоторые браузеры возвращают вычисленную позицию, если элемент виден в данный момент. Трюк заключается в том, чтобы скрыть его, прочитать css, а затем снова сделать его видимым (если он еще не скрыт).

Я написал удобную функцию, которая позаботится об этом и вернет auto в Firefox.

jsFiddle

var getCss = function($elem, prop) {
        var wasVisible = $elem.css('display') !== 'none';
        try {
            return $elem.hide().css(prop);
        } finally {
            if (wasVisible) $elem.show();
        }
    };


alert( getCss($('div'), 'top') );

finally - это просто вернуть видимость элементу непосредственно перед возвратом функции.

Вы должны использовать эту функцию только для ситуаций, в которых вы ожидаете возвращения auto.

Ответ 3

Вы можете получить целочисленное значение верхнего значения при установке "auto" с помощью кода ниже:

$(function(){
    var top = $('div').offset().top;
    alert(top);
});

offset Возвращаемое значение позиции Когда вы устанавливаете на авто

Ответ 4

Просто удалите стиль position, и вы получите auto вместо вычисленного значения.

div {
    top: auto;
    bottom:20px;    
    right:20px;
    left:0px;
}

вы можете протестировать его здесь.