真的找不到这个问题的好标题……
问题:调整浏览器窗口大小时,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/
尝试用内联块替换它们.
我用你的小提琴做了一个测试,它的确有效.
http://jsfiddle.net/notme/FA8TN/
.menu li { display: inline-block; margin: 20px; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。