Javascript-форум - Firefox, Google, WindowResize

Всем привет.
Интересная проблема.
При расширении 533 пикслей ширины, я с помощью медиа-запросов показываю DIV.
После того как блок показан, я выполняю эту функцию.
Проблема в том, что в Google Chrome и Firefox, по разному отображают.

В Firefox может появиться сначала меню при 520 пикселей, а в Google Chrome, с разницей в 2 пикселя.

function windowSize(){
                //Сюда писал  и ($(document).width() и ($(document.body).width() и ($(window).width()
		if ($(".header-wrap").width() > '520'){
			$('ul.navigation').show();
		} else {
			$('ul.navigation').hide();
		}
		if ($(".header-wrap").width() > '10'){
			$('.header-wrap').removeClass("height207");
		} else {
		}
	}
	$(window).on('load resize',windowSize);

Код:

@media (max-width: 533px) {

        .collapse-nav{

                width: 48px;

                heigt: 49px;

                background: url(../images/callapse.png) #5ac1a2 no-repeat;

                position: absolute;

                right: 10px;

                top: 6px;

                cursor: pointer;

                -webkit-border-radius: 1px;

                -moz-border-radius: 1px;

                border-radius: 1px;

        }

}

Как мне добиться одинакового результата в обеих браузерах?
И почему не совпадают цифры?
Почему медиа-запрос срабатывает при 533, а JS не сработает при тех же размерах,
если в скрипте задать 533 пикселей(if ($(".header-wrap").width() > '533'){)?