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

概述真的找不到这个问题的好标题…… 问题：调整浏览器窗口大小时,Chrome中的菜单位置不会更新,UNTIL会将鼠标悬停在鼠标悬停上方.在Firefox中没有任何问题. 我做了一个简单的小提琴http://jsfiddle.net/fHcw7/ 如果将“固定位置”替换为“相对位置”,则Chrome中没有任何问题 HTML <div id="main"> <div id="div_top 真的找不到这个问题的好标题……

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

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

如果将“固定位置”替换为“相对位置”,则Chrome中没有任何问题

HTML

<div ID="main">        <div ID="div_top" >                 <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;       }

总结

以上是内存溢出为你收集整理的html – CSS Chrome在使用position：fixed时不更新中心位置;全部内容，希望文章能够帮你解决html – CSS Chrome在使用position：fixed时不更新中心位置;所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。