У меня возникла проблема с браузерами 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? Если это ошибка, кто-нибудь знает какие-нибудь хорошие обходные пути? Живой сайт здесь, дайте мне знать, если мне нужно предоставить больше информации. Благодарю.
Я уменьшил это до: http://jsbin.com/opawal/
480px.480px.480px.Это ошибка.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
display: inline-block;
}
nav {
float: right;
}
@media screen and (max-width:480px) {
nav {
float: none;
}
}
</style>
</head>
<body>
<h2>h2 element</h2>
<nav>nav element</nav>
</body>
</html>