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'){)?
1 ответ

используйте лучше в JS matchMedia все будет совпадать с CSSпример http://learn.javascript.ru/play/4Puycbпоменяйте ширину области отображения и посмотрите CSS синхронно меняет фон, а JS сообщениеда, для старых IE применяйте msMatchMedia