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);
<pre class="prettyprint linenums">@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; } }</pre>
Как мне добиться одинакового результата в обеих браузерах? И почему не совпадают цифры? Почему медиа-запрос срабатывает при 533, а JS не сработает при тех же размерах, если в скрипте задать 533 пикселей(if ($(".header-wrap").width() > '533'){)?
1 ответ

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