I believe that that this is a webkit specific bug affecting pixel based media queries.

If you use ems instead of px in your queries...it seems to work.

stye:


body {
  font: normal 1.1em/1.2 Arial, Helvetica, sans-serif
}
.page {
  width: 720px;
  margin: 0 auto;
}
.nav {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #CCC;
}
.nav li {
  float: left;
  padding: 2px 10px;
  background: #999;
  color: white;
  margin: 0 7px;
}


HTML :


<div class="page">
<ul class="nav">
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
<li>list 10</li>
</ul>
</div>

don't use width in li .... text will change

To my knowledge, there is no fool-proof solution for making sure something will look perfect when zoomed in or zoomed out. It will always distort somewhat, and sometimes that results in very funky layouts in some browsers.

This is the most obvious when you use pixels (zooming in/out will result in half-pixels and then the browser has to fix that by rounding up or down), but I've seen situations where other things are off when zooming.