跨浏览器获取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 进入“标准兼容”而不是“怪癖”模式。请参阅怪异模式和严格模式。

另请参阅 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;
  };