Преобразование размеров элемента HTML не в px в px in (проблема IE)

Question

Я пытаюсь получить ширину границы определенного элемента.Получить настройку стиля ширины границы довольно просто, просто прочитав, если из текущего вычисленного стиля элемента:

var styles = (
    document.defaultView && document.defaultView.getComputedStyle ?
    document.defaultView.getComputedStyle(de, null) :
    de.currentStyle
);

Считывание определенного значения границы тогда довольно просто:

var top = styles.borderTopWidth;
var value = parseFloat(top);

Этовсе хорошо и прекрасно (если вы не используете IE ), и я могу получить ширину верхней границы в переменной value.Но это число относится к пикселям только тогда, когда ширина границы была установлена ​​в пикселях .Если это не так (например, em), то value имеет номер этого конкретного измерения.

Я должен получить ответ на любой из этих двух вопросов:

1. Как мне всегда получать ширину границы в пикселях?
2. Как рассчитать различные единицы измерения в пикселях?

Пример

Я подготовил пример jsFiddle , где вы можете увидеть различные измерения, сообщаемые DOM и jQuery.Запустите его в разных браузерах, и вы увидите разницу в IE.Все измерения в Crome представлены в целочисленных значениях, в то время как Firefox вычисляет поля и отступы в числах с плавающей точкой, а границы в целых числах.

Кстати: поля, границы и отступы установлены на 2mm .

Answer 1

Большинство библиотек решают эту проблему за вас, как, например, YUI3.Если вы не хотите использовать эти библиотеки, по крайней мере, вы можете продемонстрировать, как они это делают;)

http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html

Содержащийся в нем Awnser.

Answer 2

Обычно вы можете получить вычисленные размеры в пикселях, используя element.offsetWidth и element.offsetHeight. Это несколько чувствительно, если вы хотите поддерживать ряд браузеров. В этом случае используйте библиотеку. Например, используя jQuery, вы можете получить гарантированные размеры в пикселях с помощью чего-то вроде этого: jQuery ("# ​​theID"). Width ().