我遇到了 Webkit 浏览器 (Chrome/Safari)、CSS3 媒体查询的问题，display and float on my site http://oo.apphb.com。我网页上的默认样式是浮动元素nav向右和display:inline-block。当窗口大小调整为移动设备大小时，媒体查询会将其重新设置为：float:none; display:block。当浏览器大小恢复正常时，就会出现问题：导航元素看起来下降了大约其高度。这是一些图片和标记：
Window Normal and Site Displayed Correctly:
Window Mobile Sized, Site Displayed Correctly:
Window Sized Back To Normal, Site Displayed Incorrectly:
这是正常的样式nav (and yes我要把 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做错了？如果它is一个错误，有人知道有什么好的解决方法吗？直播现场是here http://oo.apphb.com，如果我需要提供更多信息，请告诉我。谢谢。
我把它简化为：http://jsbin.com/opawal/ 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>