使用位置时 CSS Chrome 不更新中心位置：已修复；答案

【问题标题】：CSS Chrome not updating center position when using position: fixed;使用位置时 CSS Chrome 不更新中心位置：已修复；
【发布时间】：2013-12-23 07:33:29
【问题描述】：

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

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

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

如果将 'position fixed' 替换为 'position relative' 在 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;   
}

【问题讨论】：

+1，我记得昨天尝试解决这个问题 :)
是的，我提出了一个新问题，因为我们（您）现在找到了问题 :)

标签： html css google-chrome css-position

【解决方案1】：

我认为问题与 li 元素的显示内联有关。
尝试用 inline-block 替换它们。
我用你的小提琴做了一个测试，它可以工作。
http://jsfiddle.net/notme/FA8TN/

.menu li

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

【讨论】：