Поплавок и отображение Webkit - программирование

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

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

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

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

Здесь нормальный стиль для 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? Если это ошибка, кто-нибудь знает какие-нибудь хорошие обходные пути? Живой сайт здесь, дайте мне знать, если мне нужно предоставить больше информации. Благодарю.

Ответ 1