html – CSS Chrome在使用position：fixed时不更新中心位置;

真的找不到这个问题的好标题……

问题：调整浏览器窗口大小时,Chrome中的菜单位置不会更新,UNTIL会将鼠标悬停在鼠标悬停上方.在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.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;   
}

解决方法

我认为这个问题与li元素的内联显示有关.
尝试用内联块替换它们.
我用你的小提琴做了一个测试,它的确有效.
http://jsfiddle.net/notme/FA8TN/

.menu li

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