Webkit浮动和显示

Question

Webkit浮动和显示

Tho*_*lds 11 css webkit css3 css-float media-queries

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

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

Window Mobile Sized,网站显示正确: 窗口移动大小,站点正确显示

窗口大小恢复正常,网站显示不正确: 在此输入图像描述

这是正常的样式nav(是的,我将IE7的东西移动到一个单独的样式表......)

nav {
    text-align:center;
    float:right;
    display:inline-block;
    *display:inline;
    zoom:1;
    margin-top:30px;
    *margin-top:-70px;
}

Run Code Online (Sandbox Code Playgroud)

这是重新设计的媒体查询nav:

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

Run Code Online (Sandbox Code Playgroud)

那么,这是一个Webkit错误,还是预期的行为？我做错了什么,或者是Webkit？如果它是一个bug,有人知道任何好的解决方法吗？现场网站在这里,如果我需要提供更多信息,请告诉我.谢谢.

Answer 1

thi*_*dot 7

我把它简化为: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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，10 月前
查看次数：	5599 次
最近记录：	14 年，10 月前