Блог

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

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

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

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

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

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

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

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

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

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

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