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; 
    }