Ermitteln der absoluten Breite der Ränder (Problem mit Rand: auto;)

Question

Ich versuche, die used value der Ränder eines Elements zu bestimmen. Mein Verständnis ist, dass dies über .getComputedStyle() zurückgegeben werden sollte. Es scheint jedoch, dass FireFox und Opera nicht die richtigen Werte zurückgeben, wenn margin: auto; verwendet wird. Firefox gibt '0px' und Opera kehrt '0px' oder gelegentlich 'auto':

http://jsfiddle.net/8FXbZ/

Ich weiß, ich könnte den Inhalt Breite des Mutter berechnen und die Gesamtbreite des Kindes, und verwenden Sie diejenigen, die Ränder zu berechnen , aber ich bin auf der Suche in erster Linie auf den Fall, wenn die Eltern ein Flexbox ist:

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

Auch hier sind die Werte möglicherweise ‚Reverse Engineering‘ werden könnte, aber das wäre relativ kompliziert (BWS Wenn die Flexbox das Wrapping erlaubt hat, fragte ich mich, ob jemand andere Gedanken hatte.

Answer 1

Es gibt einen Fehler in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=381328, der den falschen Wert zurückgibt.

Answer 2

Ich weiß, das ist nicht die Antwort, die Sie suchen. Angesichts des Fehlers, hier ist eine Poly-Fill ich begann, die linken und rechten Ränder zu berechnen. 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 
    } 
} 

Es gibt einen Haken, müssen Sie in einen leeren <span></span> Tag Teiler einzufügen zwischen den Elementen Sie versuchen, für die Ränder zu berechnen. Es kann ein beliebiges leeres Tag sein (das 0 Breite und Höhe hat, aber sichtbar ist).

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

Wenn Sie waren die Teiler span-Tags zu entfernen, und verwenden Rekursion die vorherige und nächste Element Margen berechnen Sie in kreisförmige Endlosschleife laufen würde als Feld der rechts Box würde erfordern, links links Randwert und rechts Box würde die links Box rechts Marge Wert benötigen.