Несовместимая функция jQuery при изменении размеров элементов при загрузке страницы

Question

Ahoy! Я создал небольшой скрипт для проверки размера левого поля при загрузке страницы, изменил размер div там, чтобы заполнить его, и изменил div заголовка, чтобы он плавал рядом с ним.

Вот код:

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);
                   });
        });

И демонстрация здесь: http://robertmay.me.uk/mockups/plane.html (это создает линию, которая растягивается слева). Теперь это работает в браузерах webkit. Это не работает в Mozilla, и я даже не пробовал это в IE. У кого-нибудь есть идеи, почему он не работает в Mozilla? У меня есть ощущение, что это может быть связано с CSS.

Answer 1

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

Эта строка дает результат «0px» в Firefox независимо от ширины окна. Однако Firebug Lite в Safari показывает, что это значение изменяется в зависимости от ширины окна.

Кажется, проблема в части .css ('margin-left') оператора, так как $ (". Container_16: not (: first)") возвращает один и тот же элемент в обоих браузерах. Действительно, Firebug в Firefox показывает, что Computed Style для этого элемента имеет «0px» для marginLeft и marginRight, но в Safari это ненулевое значение.

Как и ожидалось, переход с 'margin-left' на 'marginLeft' не имеет значения, равно как и прямой доступ к атрибуту, например $ (". Container_16: not (: first)") [0] .style.marginLeft, потому что Firefox вычисляет это неправильно в первую очередь.

Извините, у меня нет ответа, но, надеюсь, это приведет вас в правильном направлении. Хотя я бы попытался выровнять макет, используя только CSS, прибегая к исправлениям JavaScript только в качестве крайней меры.