title: Webkit float and display
body: <p>I've run into a problem with Webkit browsers (Chrome/Safari), CSS3 Media Queries, <code>display</code> and <code>float</code> on my <a href="http://oo.apphb.com" rel="noreferrer">site</a>. The default styling on my webpage is to float the element <code>nav</code> to the right and <code>display:inline-block</code>. When the window is resized to mobile size, Media Queries restyles it to: <code>float:none; display:block</code>. 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:</p>
  
  <p>Window Normal and Site Displayed Correctly: 
  <img src="https://i.stack.imgur.com/fMoLz.png" alt="Window Normal and Site Displayed Correctly: "> </p>
  
  <p>Window Mobile Sized, Site Displayed Correctly:
  <img src="https://i.stack.imgur.com/ahgta.png" alt="Window Mobile Sized, Site Displayed Correctly"></p>
  
  <p>Window Sized Back To Normal, Site Displayed Incorrectly:
  <img src="https://i.stack.imgur.com/ICfkz.png" alt="enter image description here"></p>
  
  <p>Here's the normal styling for <code>nav</code> (and <em>yes</em> I'm going to move the IE7 stuff into a separate stylesheet...)</p>
  
  <pre><code>nav {
      text-align:center;
      float:right;
      display:inline-block;
      *display:inline;
      zoom:1;
      margin-top:30px;
      *margin-top:-70px;
  }
  </code></pre>
  
  <p>Here's the media query that restyles <code>nav</code>:</p>
  
  <pre><code>@media screen and (max-width:480px) 
  {   
       header nav 
       {
           margin:0;
           float:none;
           display:block;
       }
  }
  </code></pre>
  
  <p>So, is this a Webkit bug, or expected behavior? Am I doing something wrong, or is Webkit? If it <em>is</em> a bug, anybody know any good workarounds? The live site is <a href="http://oo.apphb.com" rel="noreferrer">here</a>, let me know if I need to provide anymore info. Thanks. </p>