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

【问题标题】：Cross-browser method for getting width and height of a DIV?获取DIV宽度和高度的跨浏览器方法？
【发布时间】：2011-01-21 08:00:37
【问题描述】：

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

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

.outerWidth() 和 .outerHeight() 也不一致。当他们在 FF 中使用 IE（信不信由你）时，填充会再次添加到全宽（例如，outerWidth() 在 FF 中返回 110，其中宽度为 100 像素，填充为 10 像素）。

有没有办法在不编写复杂的浏览器检查的情况下摆脱这种混乱？谢谢！

【问题讨论】：

标签： javascript jquery cross-browser height width

【解决方案1】：

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

另见width():

和outerWidth():

【讨论】：

惊人的建议！我花了一整天的时间，你在 10 秒内解决了它。 DOCTYPE 实际上导致 width() 和 height() 在所有浏览器中都能完美运行。太感谢了。我永远不会想到这一点。显然我没有足够的声望给你投票，所以我会一遍又一遍地感谢你。如果我有钱，我会付钱给你！ =]
您可能无法投票，但您可以检查@cletus 的答案是否被接受。
@thinktank：不用担心。盒子模型不一致是一个经常出现的问题。每个人都需要学习一次。 :) 顺便说一句，如果它回答了你的问题，即使没有投票，你也可以接受答案。

【解决方案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;
  };

【讨论】：