Question

我正在尝试确定元素边距的used value。我的理解是，这应该通过.getComputedStyle()返回。但是，使用margin: auto;时，似乎FireFox和Opera不会返回正确的值。 Firefox返回'0px'，Opera返回'0px'或偶尔返回'auto'：

http://jsfiddle.net/8FXbZ/

我知道我可以计算父级的内容宽度和子级的总宽度，并使用它们来计算边距，但我主要看的是父级是弹性框的情况：

http://jsfiddle.net/8FXbZ/1/

同样，这些值可能是'逆向工程'，但这会变得相对复杂（特别是如果flexbox允许包装），所以我想知道是否还有其他任何想法？

Answer 1

Firefox中存在一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=381328返回错误的值。

Answer 2

我知道这不是你要找的答案。鉴于这个bug，这里是一个poly-fill，我开始计算左右边距。 FIDDLE

function getMargin(elem) {
  var parent = elem.parentNode,
    prev = elem, 
    next = elem, 
    leftEdge, 
    rightEdge;

  var pos = elem.getBoundingClientRect();
  var parentPos = parent.getBoundingClientRect();
  var parentComputed = window.getComputedStyle(parent);
  while((prev = prev.previousSibling) && !prev.getBoundingClientRect){}
  while((next = next.nextSibling) && !next.getBoundingClientRect){}
  if(prev)
    leftEdge = prev.getBoundingClientRect().right; //+ getMargin(prev).right
  else {
    leftEdge = parentPos.left + parseInt(parentComputed.getPropertyValue("padding-left")) + parseInt(parentComputed.getPropertyValue("border-left-width"))
  }
  if(next)
    rightEdge = next.getBoundingClientRect().left; //- getMargin(next).left;
  else {
    rightEdge = parentPos.right - parseInt(parentComputed.getPropertyValue("padding-right")) - parseInt(parentComputed.getPropertyValue("border-right-width"))

  }

  return { 
    left: pos.left - leftEdge, 
    right: rightEdge - pos.right 
  } 
}

有一个问题，你需要在试图计算边距的元素之间插入一个空的<span></span>标记分隔符。它可以是任何空标签（其宽度和高度均为0，但可见）。

<div id="parent">
  <div id="inner"></div>
  <span></span>
  <div id="other"></div>
</div>

如果要删除分隔符范围标记，并使用递归计算上一个和下一个元素的边距，则会遇到循环无限循环，因为 left 框需要右边框的左边距值和右框需要左框的右边距值。

获得边距的绝对宽度（边距问题：auto;）

2 个答案: