Inkonsistente jQuery-Funktion beim Ändern der Größe von Elementen beim Laden der Seite

Question

Ahoi! Ich habe ein kleines Skript erstellt, um die Größe des linken Randes beim Laden der Seite zu überprüfen, die Größe eines div dort zu ändern, um es zu füllen, und den Header div so zu ändern, dass er daneben schwebt.

Hier ist der Code:

function buildHeader() { 
      var containerMarginLeft = $(".container_16:not(:first)").css("margin-left"); 
      var headerHeight = $("#header").height(); 
      $("#stripe").width(containerMarginLeft).height(headerHeight).css("float", "left"); 
      $(".container_16:first").css("float", "left"); 
      $("#header").css("margin-left", 0).width(950); 
     } 

     $(document).ready(function(){ 
      // Manipulate layout for the first time 
      buildHeader(); 
      // Manipulate layout when window is resized 
      var resizeTimer = null; 
      $(window).bind('resize', function() { 
       if (resizeTimer) clearTimeout(resizeTimer); 
         resizeTimer = setTimeout(buildHeader, 100); 
        }); 
     }); 

Und die Demonstration ist hier: http://robertmay.me.uk/mockups/plane.html (es schafft die Zeile, die auf der linken Seite erstreckt). Jetzt funktioniert es in Webkit-Browsern. Es funktioniert nicht in Mozilla, und ich habe es nicht einmal in IE versucht. Hat jemand irgendwelche Ideen, warum es in Mozilla nicht zu funktionieren scheint? Ich habe das Gefühl, dass es etwas mit dem CSS zu tun haben könnte.

Answer 1

$(".container_16:not(:first)").css("margin-left"); 

Diese Zeile gibt ein Ergebnis von '0px' in Firefox unabhängig davon, wie breit das Fenster wird. Bei Firebug Lite in Safari wird dieser Wert jedoch abhängig von der Breite des Fensters angezeigt.

Das Problem scheint mit dem .css ('margin-left') Teil der Anweisung zu sein, da $ (". Container_16: not (: first)") das gleiche Element in beiden Browsern zurückgibt. Tatsächlich zeigt Firebug in Firefox den berechneten Stil für dieses Element mit '0px' für marginLeft und marginRight, aber dies ist in Safari nicht Null.

Wie erwartet, ändert sich der Wechsel von 'margin-left' zu 'marginLeft' nicht, ebenso wenig wie der direkte Zugriff auf das Attribut, wie $ (". Container_16: not (: first)") [0] .style.marginLeft , weil Firefox es in erster Linie falsch berechnet.

Entschuldigung, ich habe keine Antwort, aber hoffentlich führt Sie das in die richtige Richtung. Für mich würde ich jedoch versuchen, das Layout nur mit CSS auszurichten und nur als letzten Ausweg auf JavaScript-Korrekturen zurückzugreifen.