CSS Chrome在使用位置时未更新中心位置：fixed;

Question

找不到这个问题的好标题...

问题：调整浏览器窗口的大小时，Chrome中菜单位置不会更新，直到您将鼠标悬停在鼠标上。在Firefox中根本没有问题。

我做了一个简单的小提琴http://jsfiddle.net/fHcw7/

如果更换 '位置固定' 到 '相对位置' 是有在Chrome中没有问题

的Html

<div id="main"> 
     <div id="div_top" class="menu">  
      <nav> 
       <ul> 
        <li> 
         <a href="#">HELLO</a> 
        </li> 

        <li> 
         <a href="#">WORLD</a> 
        </li> 

        <li> 
         <a href="index.html">BANANA</a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
</div> 

CSS

#main 
{ 
    height: 175%; 
    width: 100%; 
    border: solid red 1px; 
    position: absolute; top: 0; left: 0;   
    overflow: hidden; 
    background-color: #333; 
} 

#div_top 
{ 
    width: 100%; 
    height: 100px; 
    margin-top: 20px; 
    position: fixed; 
    border: solid yellow 1px; 

    text-align: center; 
    font-size: 18px; 
    font-weight: bold; 
    color: #fff; 
    z-index: 100; 
} 

.menu a:link 
{ 
    color: #fff; 
    text-decoration: none; 

} 
.menu a:visited 
{ 
    color: #fff; 
    text-decoration: none; 
} 
.menu a:hover 
{ 
    background-color: rgba(100, 50, 0, 0.4); 
    border-radius: 5px; 
    border: solid white 2px; 
    margin: -2px; 
} 
.menu a:active 
{ 
    color: #fdd; 
} 
.menu ul 
{ 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 
.menu li 
{ 
    display: inline; 
    margin: 20px; 
} 

Answer 1

我认为这个问题与显示有关李元素线。
尝试用内嵌块代替它们。
我用你的小提琴做了一个测试，它的工作原理。
http://jsfiddle.net/notme/FA8TN/

.menu li 

    { 
     display: inline-block; 
     margin: 20px; 
    }