Webkit float and display_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-16 19:06 出处：网络

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:

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:

Webkit float and display

Window Mobile Sized, Site Displayed Correctly:

Webkit float and display

Window Sized Back To Normal, Site Displayed Incorrectly:

Webkit float and display

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;
    开发者_如何学Python     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>