我在 site 上遇到了 Webkit 浏览器 (Chrome/Safari)、CSS3 媒体查询、display 和 float 问题。 .我网页上的默认样式是将元素 nav float 到右侧和 display:inline-block。当窗口调整为移动尺寸时，媒体查询将其重新样式化为:float:none;显示: 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 ，让我知道是否需要提供更多信息。谢谢。
最佳答案
我将其简化为: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>
关于css - webkit float 显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6560629/