Webkit плавать и отображать - PullRequest
Новая
       35

Webkit плавать и отображать

11 голосов
/ 03 июля 2011

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

Окно Normal и сайт отображаются правильно: Window Normal and Site Displayed Correctly:

Размер окна Mobile, сайт отображается правильно: Window Mobile Sized, Site Displayed Correctly

Окно с размером, возвращенным к нормальному, Сайт отображается неправильно: enter image description here

Вот нормальный стиль для 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 Ответ

7 голосов
/ 03 июля 2011

Я уменьшил его до этого: http://jsbin.com/opawal/

  • Начните с более широкого окна, чем 480px.
  • Сделайте его меньше, чем 480px.
  • Сделайте его больше, чем 480px.
  • Произошел "прыжок" - чтобы сделать это очевидным, нажмите F5.

Это ошибка. 

<!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>
...