Webkit浮动和显示 [英] Webkit float and display
问题描述
我遇到了Webkit浏览器（Chrome / Safari），CSS3媒体查询，显示和 float 在我的，如果我需要提供更多信息，请告诉我。谢谢。
我将其缩减为： http://jsbin.com/opawal/
- 开始于<$ c $
- 跳跃发生了 - 为了使它显而易见，击中F5。 使它大于
<<>
480px > 这是一个错误。
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< style>
h2 {
display：inline-block;
}
nav {
float：right;
}
@media screen和（max-width：480px）{
nav {
float：none;
}
}
< / style>
< / head>
< body>
< h2> h2元素< / h2>
< nav> nav元素< / nav>
< / body>
< / html>
I've run into a problem with Webkit browsers (Chrome/Safari), CSS3 Media Queries, display and float on my site. The default styling on my webpage is to float the element nav to the right and display:inline-block. When the window is resized to mobile size, Media Queries restyles it to: float:none; display:block. The problem arises when the browser is sized back up to normal: the navigation element appears dropped down about the amount of its height. Here's some pictures and markup:
Window Normal and Site Displayed Correctly:
Window Mobile Sized, Site Displayed Correctly:
Window Sized Back To Normal, Site Displayed Incorrectly:
Here's the normal styling for nav (and yes I'm going to move the IE7 stuff into a separate stylesheet...)
nav {
text-align:center;
float:right;
display:inline-block;
*display:inline;
zoom:1;
margin-top:30px;
*margin-top:-70px;
}
Here's the media query that restyles nav:
@media screen and (max-width:480px)
{
header nav
{
margin:0;
float:none;
display:block;
}
}
So, is this a Webkit bug, or expected behavior? Am I doing something wrong, or is Webkit? If it is a bug, anybody know any good workarounds? The live site is here, let me know if I need to provide anymore info. Thanks.
I reduced it down to this: http://jsbin.com/opawal/
- Start with the window wider than
480px. - Make it smaller than
480px. - Make it larger than
480px. - The "jump" has happened - to make it obvious, hit F5.
It's a bug.
<!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浮动和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
