Question

我在site上遇到了Webkit浏览器（Chrome / Safari），CSS3媒体查询，display和float的问题。我的网页上的默认样式是将元素nav浮动到右侧display:inline-block。当窗口调整为移动大小时，媒体查询会将其重新调整为：float:none; display:block。当浏览器的大小恢复正常时，会出现问题：导航元素显示为低于其高度的数量。这是一些图片和标记：

正常显示窗口正常和网站： Window Normal and Site Displayed Correctly:

Window Mobile Sized，网站显示正确： 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？如果是一个错误，任何人都知道任何好的解决方法吗？实时网站是here，如果我需要提供更多信息，请与我们联系。谢谢。

Answer 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>

Webkit浮动和显示

1 个答案: