[arborik]

Всем привет.
Интересная проблема.
При расширении 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'){)?