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