问题的原因是，作者在2008年写的答案中指出，在当时，对于大多数人来说，使用jQuery是解决跨浏览器问题的最佳方案。答案中给出了使用jQuery的方法来检索HTML元素的实际宽度和高度。

解决方法是使用jQuery的核心CSS函数之一，即height和width（或者outerHeight和outerWidth，根据需要）。通过以下代码可以获取元素的实际高度和宽度：

var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();

以上代码中，$("#myDiv")表示选择具有id为"myDiv"的元素，height()和width()函数用于获取该元素的实际高度和宽度。$(document)表示选择整个文档，height()和width()函数用于获取整个文档的实际高度和宽度。

这些方法可以方便地获取HTML元素的实际宽度和高度，而不需要考虑不同浏览器的兼容性问题。

如何获取HTML元素的实际宽度和高度？

当我们需要获取HTML元素的实际宽度和高度时，通常会使用`.offsetWidth`和`.offsetHeight`属性。然而，这两个属性在某些情况下会返回0，因此并不可靠。

为了解决这个问题，我们可以使用`Element.getBoundingClientRect()`方法来获取HTML元素的实际宽度和高度。这个方法会返回一个包含宽度、高度以及其他有用值的对象。与`.offsetWidth`和`.offsetHeight`属性不同的是，`getBoundingClientRect()`方法可能会返回带有小数的像素值，而不是四舍五入到最近整数。

以下是使用`getBoundingClientRect()`方法获取元素宽度和高度的示例代码：

var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;

需要注意的是，`getBoundingClientRect()`方法在IE8及以下版本中不返回宽度和高度。如果必须支持IE8，可以使用`.offsetWidth`和`.offsetHeight`属性来获取元素的宽度和高度：

var height = element.offsetHeight;
var width = element.offsetWidth;

需要注意的是，`getBoundingClientRect()`方法返回的对象并不是一个普通的对象，它的属性不可枚举。因此，不能直接使用`Object.keys()`方法来获取属性列表。

如果需要将`getBoundingClientRect()`方法返回的对象转换为普通对象，可以参考以下链接中的解决方案：

[How best to convert a ClientRect / DomRect into a plain Object](https://stackoverflow.com/questions/39417566)

- `.offsetHeight`和`.offsetWidth`属性无法可靠地获取HTML元素的实际宽度和高度。

- 使用`Element.getBoundingClientRect()`方法可以获取HTML元素的实际宽度和高度。

- `getBoundingClientRect()`方法返回的对象可能包含小数像素值。

- 在IE8及以下版本中，`getBoundingClientRect()`方法不返回宽度和高度，可以使用`.offsetHeight`和`.offsetWidth`属性替代。

- 需要注意`getBoundingClientRect()`方法返回的对象属性不可枚举。

- 可以参考链接中的解决方案将`getBoundingClientRect()`方法返回的对象转换为普通对象。

参考链接：

- [.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)

- [.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)

- [Element.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

- [How best to convert a ClientRect / DomRect into a plain Object](https://stackoverflow.com/questions/39417566)

如何获取HTML元素的实际宽度和高度？

要获取HTML元素的实际宽度和高度，可以使用`offsetWidth`和`offsetHeight`属性。这两个属性属于元素本身，而不是`.style`属性。

示例代码：

var width = document.getElementById('foo').offsetWidth;

另外，可以使用`getBoundingClientRect()`函数来获取元素的尺寸和位置，返回的值是浮点型数值，包括CSS变换后的结果。

示例代码：

console.log(document.getElementById('foo').getBoundingClientRect());

如果最近对元素进行了某些DOM修改操作，`offsetHeight`和`offsetWidth`可能返回0。在这种情况下，可以将代码放在`setTimeout`函数中执行，以确保在修改元素后再获取尺寸。

关于`offsetWidth`返回0的情况，如果元素的`display`属性为`none`，则`offsetWidth`将返回0，而计算后的`width`可能仍然有一个正值。`visibility`属性的值为`hidden`不会影响`offsetWidth`。可以通过设置元素的`box-sizing`属性为`border-box`来使`offsetWidth`和`clientWidth`的值相等。

需要注意的是，不同浏览器对于`offsetHeight`和`offsetWidth`的返回结果可能有所不同。同时，`offsetWidth`和`clientWidth`有不同的含义。`offsetWidth`返回整个框包括内容、内边距和边框的尺寸，而`clientWidth`只返回内容框的尺寸。当元素具有非零的内边距和/或边框时，`clientWidth`的值会比`offsetWidth`小。在某些情况下，它们可能相等，例如当设置`box-sizing`属性为`border-box`时。

需要注意的是，在按钮中的图标上，Chrome和Firefox返回不同的结果。此外，使用`requestAnimationFrame`比使用`setTimeout`更加推荐。

根据MDN文档，Chrome和Safari对于`offsetHeight`的支持情况未知，并且这被标记为一个“实验性特性”。无法确定这是否具有跨浏览器的兼容性。

尽管在DIV中有文本并且进行了鼠标点击，但`offsetWidth`和`clientWidth`仍然显示为0。

有人可以提供一个`offsetHeight`返回0的示例吗？我尝试创建了一个示例，但无法复现。

需要注意的是，`offsetWidth`始终是一个四舍五入的值，例如，当检查工具显示为220.78时，它会报告为221。这在计算相邻宽度时可能会产生差异。是否有一种方法可以获取真实的值？