获取DIV宽度和高度的跨浏览器方法？

Question

这是我的第一篇文章，所以请放轻松我。我确定我做错了什么。但是，我找不到任何回复上述问题的帖子。

我使用jQuery。我正试图找到一种方法来获取DIV元素的当前宽度和高度，即使它们被设置为“自动”。我发现了很多方法，但没有方法在IE中返回相同的宽度。重要的是这种方法是跨浏览器的，因为如果在不同的浏览器中返回不同的数字，它将破坏页面的布局。

.width（）和.height（）不起作用，因为在IE中，减去了填充（例如，width（）返回25，其中宽度为30，填充为5）。

.outerWidth（）和.outerHeight（）也不一致。虽然它们在FF中使用IE（相信或不相信），但填充再次添加到整个宽度（例如，outerWidth（）在FF中返回110，其中宽度为100px，填充为10px）。

没有编写复杂的浏览器检查，有没有办法解决这个问题？谢谢！

Answer 1

在我看来，您需要在页面中添加DOCTYPE以强制IE进入“符合标准”而不是“怪癖”模式。请参阅Quirks mode and strict mode。

另见width()：

和outerWidth()：

Answer 2

我不知道这是否有帮助，但是下面的片段将设置内部元素的高度，以便它完全填充可用空间。内部元件（e）可以嵌套在具有设定高度的参考元件（r）内的任何深度处。该片段考虑了e和r之间所有兄弟姐妹的高度。这两个参数都可以作为DOM元素或JQuery对象传递。

var fit_v = function ( e, r, no_set ){
    if (!e.jquery) e = $(e);
    if (!r.jquery) r = $(r);
    var h, s, b = 0, d = 0;
    for (var i = 0; i < r[0].childNodes.length; i++){
      s = $(r[0].childNodes[i])
      d += s.outerHeight();
      d += Math.max(b,parseInt(s.css('margin-top')));
      b = parseInt(s.css('margin-bottom')); 
    } 
    d += b;
    h = r.height() - d;
    if (!no_set) e.height(h); 
    return h;
  };