我正在使用一个模板,导航栏从第一页的底部开始,在划线后固定在顶部时有一个奇怪的移动。我正在使用引导程序。在这里,你可以看到一个关于这种情况的小视频:http://i.imgur.com/trrmJj7.gifv
我试着把菜单的颜色改成黑色,这样它也会固定为黑色,但它仍然有同样的效果。也在各种浏览器中尝试过。这是不能修复的,还是一个错误?
这是我的HTML:
<div id="menu">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#menu-content">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/other/03_Logo.png"> <span>BRAND</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu-content">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#experience">Profile</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonial">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
和CSS:
#menu {
width: 100%;
position: absolute;
bottom: 0; }
#menu nav {
border: medium none;
background: black;
margin-bottom: 0px; }
#menu nav.navbar {
padding: 10px 0px;
border-radius: 0; }
#menu nav.navbar.navbar-fixed-top {
padding: 5px 0px; }
#menu nav.navbar-fixed-top {
background: black; }
#menu .navbar-brand {
padding: 15px 0px 0px 15px; }
#menu .navbar-brand img {
width: 45px;
float: left;
margin-top: -10px; }
#menu .navbar-brand span {
float: left;
display: block; }
尝试将-webkit-backface-visibility: hidden;
添加到导航栏中。
#menu nav.navbar {
padding: 10px 0px;
-webkit-backface-visibility: hidden;
border-radius: 0;
}
正如Bruno上面所说,这是Bootstrap 的问题
"是的,我现在看到了。我用bootstrap找到了很多记录这个问题的资源,但我不确定如何解决。祝你好运。–Bruno 8分钟前"