Получение процентных значений CSS (в firefox)

У меня проблема с получением точного значения свойства css (в '%') в firefox.

Предположим, что мы имеем эту чрезвычайно простую разметку:

<div id="box">box</div>

и этот css:

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

и Я хотел бы получить левую позицию (в '%') с помощью js

Это очень легко с mootools (demo → http://jsfiddle.net/steweb/AWdzB/):

var left = $('box').getStyle('left');

или jQuery (demo → http://jsfiddle.net/steweb/RaVyU/):

var left = $('#box').css('left');

или простым js (demo → http://jsfiddle.net/steweb/tUAKA/):

function getStyle(el,styleProp){ //from ppk quirksmode
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

var left = getStyle('box','left');

Но если вы попробуете его на firefox (8.0.1), вы увидите, что результат неверен (должен быть 10%, но 91px). Вопросы: есть ли ошибка в этой более новой версии firefox? Кто-нибудь знает, если это известная ошибка? Я что-то делаю неправильно?

Спасибо:)

Обновление. Я попробовал это также в более старых версиях firefox, и он не корректный (он всегда возвращает значение px).. для полноты, он корректно работает на IE

Ответ 1

Правильный ответ - комментарий к ошибке, которую я подал на bugzilla

https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7

Чтобы получить правильное значение% (в firefox тоже), элемент (или один из его родителей) display должен быть установлен в none

Тест: http://jsfiddle.net/4RKsM/

Непонятная вещь: почему в том же браузере/версии (см., firefox 7 на XP/win7 или Opera 11.5 на mac osx/ubuntu), но на разных os, поведение отличается?

Btw, spec @thg435, опубликованный (и сообщаемый на mdn), все еще находится в движении.

Ответ 2

Это задокументировано:

Используемое значение любого свойства CSS является конечным значением этого свойства после выполнения всех вычислений. Использованные значения можно получить, вызвав window.getComputedStyle. Размеры (например, ширина, высота строки) находятся в пикселях... и т.д.

Кажется, что нет никакого способа получить доступ к "указанным" значениям css для данного элемента, если вы точно не знаете, какое правило css применяется и проанализируйте это правило, используя document.stylesheets или аналогичный интерфейс.

Ответ 3

Как я знаю, он никогда не показывал процент (я использую ff, opera и chrome). Поэтому я думаю, что это не только проблема firefox.

Однако вы можете рассчитать его вручную, но он близок к определенному значению, если окно браузера мало.

parseInt($('#box').css('left'))/ $(window).width()*100;

Ответ 4

в chrome это зависит от фиксированного значения позиции и абсолютного значения всегда дают px, в то время как другие значения выводят то, что было введено, например, если вы дали ему значение 10%, то это вывело бы 10%, а если вы введете 100px, то получится 100px