在Internet Explorer中获取没有填充的元素的宽度

Question

我想将我的网站上的图片放到其包含元素的大小，所以我有这个：

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

我的处理程序文件userImage.ashx返回ID给出的图像，缩放到作为参数给出的宽度。

这在firefox，chrome和amp; co，但在Internet Explorer中不起作用 - 返回的图像太大。我认为这是因为.getComputedSize().width报告的宽度包括Internet Explorer中填充的大小（但在边框或边距上），但仅返回其他浏览器中的可用区域。因此，Internet Explorer提供的宽度太大。

我找不到.getComputedSize()可访问的任何其他字段，这些字段允许我在Internet Explorer中找到“实际”宽度。我尝试使用.getComputedStyle()来获取填充，这样我就可以从总宽度中减去它，但是这会返回一个字符串，我将micrositePhotoDiv元素设置为padding: 0.75em样式，所以这不会工作。

我需要做些什么才能在Internet Explorer中获得正确的宽度？

Answer 1

jQuery width()就是这样做的（见jQuery source code）。

如您所见，通常getComputedStyle会返回宽度（以像素为单位），因此您可以经常这样做（旧IE除外）：

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

Answer 2

你可以使填充0，但检查大小和位置的计算样式通常是错误的，很难协调acreoss浏览器。

在所有浏览器上使用offsetWidth或clientWidth。