0

我遇到了最奇怪的问题，我似乎找不到其他人遇到过它。

我正在使用 Bootstrap 2.3.2 做一个网站，有一个固定的顶部导航栏，假设也有一个白色背景。在 safari、Explorer 和 Firefox 中它可以完美运行，但是在最新的 Chrome 中，导航栏在向下滚动时是完全透明的？

滚动到顶部时： 在此处输入图像描述

向下滚动时： 在此处输入图像描述

我没有在任何地方设置“透明”，我最初的想法是 z-index 不正确或相似，但为什么它仍然在顶部并且是透明的？（也可以在所有其他浏览器中正常工作）

另一个线索：这种特定设置的渲染似乎存在一些缺陷，因为在 Chrome 中，当滚动嵌入的 Vimeo 视频时，菜单栏在嵌入的视频上显示为白色。

HTML代码如下：

<nav>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                 <a class="logo pull-left" href="#home"><img src="img/styleio.png" alt="Styleio"></a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a class="top-menu" href="#home">Home</a></li>
                        <li><a class="top-menu" href="#about">About</a></li>
                        <li><a class="top-menu" href="#offerings">Offerings</a></li>
                        <li><a class="top-menu" href="#features">Features</a></li>
                        <li><a class="top-menu" href="#contact">Contact</a></li>
                        <!--<a class="btn btn-primary btn-small red-bg pull right" href="#sign">Sign up</a> -->
                    </ul>

                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>
  </nav>

元素的 CSS 代码：

    .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding: 0px;
    background-color:#ffffff;
  }

.nav .navbar {
    border:none;
    background-color:#ffffff;
}

.nav {
    padding-top:20px;
}

.navbar-fixed-top {
    padding:0px;
    margin:0px;
    overflow:hidden;
}

.navbar-inner {
  min-height: 90px;
  background-color:#ffffff;
}

.navbar-inverse .nav > li > a {
    border:none;
    color: #666666;
    font-weight:500;
}

.navbar-inverse .navbar-inner {
  background: #ffffff;
  filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");

}
4

0 回答 0