Question

无法真正找到这个问题的好标题......

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

如果将“固定位置”替换为“相对位置”，则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

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

.menu li

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

使用position：fixed时，CSS Chrome不会更新中心位置;

1 个答案: