11

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

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

Window Mobile 大小，站点正确显示： 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？如果它是一个错误，有人知道任何好的解决方法吗？现场网站在这里，如果我需要提供更多信息，请告诉我。谢谢。

4

1 回答 1

7

我将其简化为：http: //jsbin.com/opawaal/

  • 从宽于 的窗口开始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>
于 2011-07-03T02:34:07.537 回答