Question

滚动时我成功地将我的导航栏固定在我的网页顶部，但是当它越过某些div（主要是滑块）时，它会变得模糊不清。有人可以帮我一把吗？

http://www.clinicajardinsbenfica.pt/new.html

提前致谢！

编辑：似乎问题只出在Chrome上。不明白为什么。

edit2：这是一个带有http://www.screenr.com/mVEH

问题的videoscreenshot

Answer 1

如果你正在谈论那个破碎的背景在虚线边框下方，那么在下面给出CSS添加来修复

#nav li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: none !important;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    float: left;
    font-family: GothamHTF-Medium;
    font-size: 17px;
    padding: 22px 0.85em 16px;
}

这是你在找什么？

Answer 2

Chrome在呈现固定元素方面存在一些问题。

您应该开始将以下内容添加到固定元素中：

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0) scale(1.0, 1.0);

translateZ(0)可用于修复众多Chrome错误。

如果这不起作用，请确保固定元素容器中没有opacity 0的元素。如果是这样，请确保他们也有display:none;

如果仍然没有得到结果，请确保您拥有以下内容：

html,body { 
    height:100%;
    overflow:auto
}

chromium仍有一个漏洞问题。

Answer 3

将此css添加到导航样式中。

#nav{
 -webkit-backface-visibility: hidden;
}

滚动时模糊导航栏

3 个答案: