Css Webkit浮动和显示_Css_Webkit_Css Float_Media Queries

Css Webkit浮动和显示

css

Css Webkit浮动和显示,css,webkit,css-float,media-queries,Css,Webkit,Css Float,Media Queries,我在我的浏览器上遇到了Webkit浏览器（Chrome/Safari）、CSS3媒体查询、display和float的问题。我的网页上的默认样式是将元素nav向右浮动，并display:inline block。当窗口大小调整为移动大小时，媒体查询将其重新设置为：float:none；显示：块。当浏览器的大小恢复正常时，问题就出现了：导航元素的高度下降了。以下是一些图片和标记：窗口正常，站点显示正确：窗口移动大小，站点显示正确：窗口大小恢复正常，站点显示不正确：这是nav的常规样式

我在我的浏览器上遇到了Webkit浏览器（Chrome/Safari）、CSS3媒体查询、

display

和

float

的问题。我的网页上的默认样式是将元素

nav

向右浮动，并

display:inline block

。当窗口大小调整为移动大小时，媒体查询将其重新设置为：

float:none；显示：块

。当浏览器的大小恢复正常时，问题就出现了：导航元素的高度下降了。以下是一些图片和标记：

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

窗口移动大小，站点显示正确：

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

这是

nav

的常规样式（是的，我将把IE7的内容移动到一个单独的样式表中…）

以下是重新设置导航样式的媒体查询：

@media screen and (max-width:480px) 
{   
     header nav 
     {
         margin:0;
         float:none;
         display:block;
     }
}

那么，这是一个Webkit错误，还是预期的行为？是我做错了什么，还是Webkit？如果是bug，有人知道什么好的解决方法吗？现场的网站是，让我知道，如果我需要提供更多的信息。谢谢

我将其简化为：

从大于
```
480px
```
的窗口开始
使其小于
```
480px
```
使其大于
```
480px
```
“跳跃”发生了-为了让它变得明显，点击F5

这是一只虫子


氢{
显示：内联块；
}
导航{
浮动：对；
}
@媒体屏幕和屏幕（最大宽度：480px）{
导航{
浮动：无；
}
}
氢元素
导航元件

恐怕是这样。谢谢您知道任何潜在的解决方法吗？尝试实现相同的视觉布局，但不要在

nav

上使用

float:right

，也不要在

h1

h2

上使用

display:inline block

。尝试反转使用

浮点

和

内联块

。或者，可以在子元素上的

标题上的位置：相对和位置：绝对对它们进行定位。如果你找不到有效的方法，请告诉我，我再看一看。@Thomas Shields:这个方法对我有效<代码>浮动：左非常干净地解决了它，做得很好。仍然完全可复制：\
@media screen and (max-width:480px) 
{   
     header nav 
     {
         margin:0;
         float:none;
         display:block;
     }
}

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