Holen Sie sich die automatisch berechnete Marge in Firefox mit jQuery

Question

Mit dem Markup und CSS unten, habe ich versucht, den berechneten linken Rand der Shell zu bekommen.

<section class="page-title"> 
     <div class="shell"> 
     <h5 class="title">Welcome!</h5> 
     </div> 
    </section> 

.shell { 
    zoom: 1; 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 16px; 
    padding-right: 16px; 
} 

Mit

parseInt($('.shell').css('marginLeft')) 

es funktioniert in Chrome, Safari, IE9 aber überraschenderweise nicht in Firefox funktioniert. Versuchte den anderen Ansatz:

($('.shell').outerWidth(true) - $('.shell').outerWidth())/2 

Funktioniert auch gut, aber Firefox. Also ich denke, Firefox unterstützt nicht, die undefinierte CSS mit jQuery zu erhalten? Ein einfacher Weg, um damit umzugehen ist:

($('.page-title').width() - $('.shell').outerWidth())/2 

Aber ich frage mich, ob es einen besseren Weg gibt.

Answer 1

Wenn Sie sagen, dass es nicht funktioniert, erhalten Sie Fehler (in der Konsole) oder gibt es 0 zurück? Die Rückgabe von 0 für die automatische Einstellung ist anscheinend ein Problem mit verschiedenen Browsern.

Sie könnten die leichte Bibliothek jSizes verwenden, die alle Metriken in Pixeln zurückgibt. Dies wird sparen Sie müssen mit outerWidth, etc ..