получение ширины элемента без заполнения в Internet Explorer

Question

Я хочу подогнать изображения на моем сайте к размеру содержащего их элемента, поэтому у меня есть следующее:

if (userHasMicrositePhoto) {
    var width = $('micrositePhotoDiv').getComputedSize().width;
    $('micrositePhoto').src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;
}

Мой файл обработчика userImage.ashx возвращает изображение, указанное в идентификаторе, масштабированное доШирина указана в качестве параметра.

Это отлично работает в Firefox, Chrome & Co, но не работает в Internet Explorer - возвращаемое изображение слишком велико.Я думаю, что это потому, что .getComputedSize().width сообщает ширину, которая включает размер отступа (но на границе или поле) в Internet Explorer, но возвращает только полезную область в других браузерах.В результате ширина, заданная Internet Explorer, слишком велика.

Я не могу найти другие поля, доступные для .getComputedSize(), которые позволяют мне найти «фактическую» ширину в Internet Explorer.Я попытался использовать .getComputedStyle(), чтобы получить отступ, чтобы вычесть его из общей ширины, но это возвращает строку, и я стилизую элемент micrositePhotoDiv как padding: 0.75em, так что это не работает.

Что мне нужно сделать, чтобы получить правильную ширину в Internet Explorer?

Answer 1

jQuery width() делает именно это (см. исходный код jQuery ).

Как вы видели, обычно getComputedStyle возвращаетширина в пикселях, так что вы часто можете сделать (за исключением старого IE):

var width = parseFloat(window.getComputedStyle(elem).width);

Answer 2

Вы можете сделать заполнение 0, но проверка вычисленных стилей для размеров и позиций часто глючит и трудно совместить браузеры acreoss.

Вместо этого используйте offsetWidth или clientWidth во всех браузерах.