Question

解决：问题来自CSS特异性.Bootstrap的css被Chrome评为关于我的菜单选择器更具体，但不是Firefox和Safari。我很惊讶浏览器之间仍然存在这种差异。

我也对此感到惊讶：

.nav. navbar-nav .navbar-right li a:link

被判断为不如此具体：

.navbar-default .navbar-nav > li > a

由于第二个只有两个类，第一个有三个类。

有什么想法？

我几个月前创建了这个网站：www.olivierfatzer.ch

现在我刚刚在菜单中添加了这个“360°”元素。我希望它像其他元素一样保持白色，但出于某种原因，在Chrome中，当我点击它一次时，它会永远保持灰色。即使我重新启动Chrome，菜单元素仍然是灰色的。

http://i.stack.imgur.com/1SCSQ.png

我真的不明白，因为这个菜单元素实际上只是它旁边菜单元素的复制/过去。

在Firefox / safari中不会发生这种情况。

有一个jquery脚本在向下滚动时添加一个类，并在向上滚动时删除该类，以在向下滚动时更改菜单的外观。

MacOSX 10.7.5上的Chrome版本为45.0.2454.101（64位）

我认为正在发生的事情是Chrome只是忽略了我的CSS这个元素而只是应用bootstrap的默认样式。但我无法弄清楚为什么只是这个元素。

这是代码，即使 - 虽然我不太确定问题来自那里：

$(window).scroll(function() {
    if($(this).scrollTop() > 10) {


        $('.navbar-fixed-top').addClass('navbarWhite', 300);
        $('.navbar-right li a:link').addClass('navbar-right-Noir', 400);
        $('.navbar-brand').addClass('navbar-brand-scroll', 400) ;
    } else {
        $('.navbar-fixed-top').removeClass('navbarWhite', 200);
        $('.navbar-right li a:link').removeClass('navbar-right-Noir');
        $('.navbar-brand').removeClass('navbar-brand-scroll');
    }
});

.navbar-right li a:link{
	color:rgba(255,255,255,0.5);
}

.navbar-right li a:link:hover{
	color:white;
}
.navbar-right li a:link:focus{
	color:rgba(255,255,255,0.5);
}


.navbar-right-Noir{
	color:#505050 !important;
}
.navbar-right-Noir:hover{
	color:#b21212 !important;
}

<ul class="nav navbar-nav navbar-right">
          <li><a id="aboutMenu" href="#about">About</a></li>
          <li><a id="360Menu" href="#360">360°</a></li>
          <li><a id="photoMenu" href="#photo">Photography</a></li>
          <li><a id="webdesignMenu" href="#webdesign">Web</a></li>
          <li><a id="videoMenu" href="#video">Video</a></li>
          <li><a id="soundMenu" href="#sound">Audio</a></li>

        </ul>

Bootstrap导航栏元素仅在Chrome中保持灰色

0 个答案: