Webkit 浮动和显示答案

【问题标题】：Webkit float and displayWebkit 浮动和显示
【发布时间】：2011-07-03 10:34:07
【问题描述】：

我在site 上遇到了 Webkit 浏览器 (Chrome/Safari)、CSS3 媒体查询、display 和 float 的问题。我网页上的默认样式是将元素nav 浮动到右侧和display:inline-block。当窗口大小调整为移动大小时，媒体查询将其重新设置为：float:none; display:block。当浏览器恢复正常大小时，问题就出现了：导航元素似乎下降了大约其高度。这是一些图片和标记：

窗口正常和站点显示正确：

Window Mobile 大小，网站正确显示：

窗口大小恢复正常，站点显示不正确：

这是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？如果它是一个错误，有人知道任何好的解决方法吗？直播网站是here，如果我需要提供更多信息，请告诉我。谢谢。

【问题讨论】：

标签： css webkit css-float media-queries

【解决方案1】：

我将其简化为：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>

【讨论】：

我很害怕。谢谢。您知道任何潜在的解决方法吗？
尝试实现相同的视觉布局，但不要在nav 上使用float: right，或者不要在h1/h2 上使用display: inline-block。尝试颠倒您对float 和inline-block 的使用。或者，position: relative 上的 header 和 position: absolute 上的子元素定位它们可能是可行的。如果您找不到有效的方法，请告诉我，我会再看看。
@Thomas Shields：修复对我有用。 float: left 解决得很干净，干得好。
仍然完全可重现：\