Webkit float and display

У меня возникла проблема с браузерами Webkit (Chrome / Safari), CSS3 Media Queries, display ] и float на моем сайте . Стиль по умолчанию на моей веб-странице заключается в размещении элемента nav вправо и отображения : inline-block . Когда размер окна изменяется до мобильного размера, Media Queries изменяет его стиль на: float: none; дисплей: блок . Проблема возникает, когда размер браузера возвращается к нормальному: элемент навигации кажется опущенным примерно на свою высоту. Вот несколько изображений и разметка:

Окно нормальное и сайт отображается правильно:

Размер окна для мобильных устройств, сайт отображается правильно:

Размер окна вернулся к нормальному, сайт отображается неправильно:

Вот нормальный стиль для nav (и да Я собираюсь переместить материал IE7 в отдельную таблицу стилей ...)

nav {
    text-align:center;
    float:right;
    display:inline-block;
    *display:inline;
    zoom:1;
    margin-top:30px;
    *margin-top:-70px;
}

Вот медиа-запрос, который меняет стиль nav :

@media screen and (max-width:480px) 
{   
     header nav 
     {
         margin:0;
         float:none;
         display:block;
     }
}

Итак, это ошибка Webkit или ожидаемое поведение? Я что-то не так делаю или это Webkit? Если это ошибка, кто-нибудь знает какие-нибудь хорошие обходные пути?Действующий сайт здесь , дайте мне знать, если мне понадобится дополнительная информация. Благодарю.