滚动在Safari中有效,但在chrome中无效

时间:2018-10-15 16:52:26

标签: html css

我在页面顶部固定了一些导航链接,这些链接会滚动到由href =“#...”位置标记的区域。它仍然可以在Safari上运行...但是一周前,它现在无法在Chrome上运行。任何建议都将不胜感激。

(如果代码过多或不足,或代码格式不正确,我深感抱歉。我是堆栈溢出的新手)

/*
CSS THAT FEATURES COMMANDS FROM .nav etc etc, AS FOUND THROUGH THE BOOTSTRAP FILE:
*/

    .navbar-default{
	    visibility: hidden;
    }
    .navbar{
    	visibility: hidden;
    }
    .navbar-fixed-top{
	visibility:hidden;
    }
    .navbar-default .navbar-nav{
	visibility: hidden;
    }
    .nav navbar-nav navbar-right{
	visibility: hidden;
    }
    .navbar navbar-default navbar-fixed-top{
	visibility: hidden;
    }
    .navbar-toggle{
	visibility: hidden;
    }}

    .dropup .caret,
    .navbar-fixed-bottom .dropdown .caret {
      content: "";
      border-top: 0;
      border-bottom: 4px solid;
    }
    .dropup .dropdown-menu,
    .navbar-fixed-bottom .dropdown .dropdown-menu {
      top: auto;
      bottom: 100%;
      margin-bottom: 1px;
    }
    @media (min-width: 768px) {
      .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
      }
      .navbar-right .dropdown-menu-left {
        right: auto;
        left: 0;
      }
    }

    .nav {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
    }
    .nav > li {
      position: relative;
      display: block;
    }
    .nav > li > a {
      position: relative;
      display: block;
      padding: 10px 15px;
    }
    .nav > li > a:hover,
    .nav > li > a:focus {
      text-decoration: none;
      background-color: #eee;
    }
    .nav > li.disabled > a {
      color: #999;
    }
    .nav > li.disabled > a:hover,
    .nav > li.disabled > a:focus {
      color: #999;
      text-decoration: none;
      cursor: not-allowed;
      background-color: transparent;
    }
    .nav .open > a,
    .nav .open > a:hover,
    .nav .open > a:focus {
      background-color: #eee;
      border-color: #428bca;
    }
    .nav .nav-divider {
      height: 1px;
      margin: 9px 0;
      overflow: hidden;
      background-color: #e5e5e5;
    }
    .nav > li > a > img {
      max-width: none;
    }
    .nav-tabs {
      border-bottom: 1px solid #ddd;
    }
    .nav-tabs > li {
      float: left;
      margin-bottom: -1px;
    }
    .nav-tabs > li > a {
      margin-right: 2px;
      line-height: 1.428571429;
      border: 1px solid transparent;
      border-radius: 4px 4px 0 0;
    }
    .nav-tabs > li > a:hover {
      border-color: #eee #eee #ddd;
    }
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
      color: #555;
      cursor: default;
      background-color: #fff;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
    }
    .nav-tabs.nav-justified {
      width: 100%;
      border-bottom: 0;
    }
    .nav-tabs.nav-justified > li {
      float: none;
    }
    .nav-tabs.nav-justified > li > a {
      margin-bottom: 5px;
      text-align: center;
    }
    .nav-tabs.nav-justified > .dropdown .dropdown-menu {
      top: auto;
      left: auto;
    }
    @media (min-width: 768px) {
      .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
      }
      .nav-tabs.nav-justified > li > a {
        margin-bottom: 0;
      }
    }
    .nav-tabs.nav-justified > li > a {
      margin-right: 0;
      border-radius: 4px;
    }
    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:hover,
    .nav-tabs.nav-justified > .active > a:focus {
      border: 1px solid #ddd;
    }
    @media (min-width: 768px) {
      .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
      }
      .nav-tabs.nav-justified > .active > a,
      .nav-tabs.nav-justified > .active > a:hover,
      .nav-tabs.nav-justified > .active > a:focus {
        border-bottom-color: #fff;
      }
    }
    .nav-pills > li {
      float: left;
    }
    .nav-pills > li > a {
      border-radius: 4px;
    }
    .nav-pills > li + li {
      margin-left: 2px;
    }
    .nav-pills > li.active > a,
    .nav-pills > li.active > a:hover,
    .nav-pills > li.active > a:focus {
      color: #fff;
      background-color: #428bca;
    }
    .nav-stacked > li {
      float: none;
    }
    .nav-stacked > li + li {
      margin-top: 2px;
      margin-left: 0;
    }
    .nav-justified {
      width: 100%;
    }
    .nav-justified > li {
      float: none;
    }
    .nav-justified > li > a {
      margin-bottom: 0px;
      text-align: center;
    }
    .nav-justified > .dropdown .dropdown-menu {
      top: auto;
      left: auto;
    }
    @media (min-width: 768px) {
      .nav-justified > li {
        display: table-cell;
        width: 1%;
      }
      .nav-justified > li > a {
        margin-bottom: 0;
      }
    }
    .nav-tabs-justified {
      border-bottom: 0;
    }
    .nav-tabs-justified > li > a {
      margin-right: 0;
      border-radius: 4px;
    }
    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus {
      border: 1px solid #ddd;
    }
    @media (min-width: 768px) {
      .nav-tabs-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
      }
      .nav-tabs-justified > .active > a,
      .nav-tabs-justified > .active > a:hover,
      .nav-tabs-justified > .active > a:focus {
        border-bottom-color: #fff;
      }
    }
<!--CODE FOR THE NAVIGATION BAR IN QUESTION:-->

        <body data-spy="scroll" data-offset="0" data-target="#navbar-main">
        <div id="navbar-main"> 
          <!-- Fixed navbar -->
          <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"     data-target="#nav"> <span class="icon-bar"></span> <span class="icon-bar"></span>                         
    <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="#headerwrap"><em></em><img src="assets/img/iaaplogo.png" width="300" class="navbar-btn"></a><br> </div>
        <br>
        <ul class="nav navbar-nav navbar-right" id="nav">
                  <li> <a href="#services" class="smoothScroll"> Details</a></li>
                  <li> <a href="#testimonials" class="smoothScroll"> Testimonials</a></li>
                  <li> <a href="#quote" class="smoothScroll"> Foundations</a></li>
                  <li> <a href="#team" class="smoothScroll"> Faculty</a></li>
                  <li> <a href="#contact" class="smoothScroll"> Contact</a></li>
            </ul></div>
          </div>
          </div>
     
          <!--/.nav-collapse --> 
         <nav class="fixed-nav-bar">
      <!-- Fixed navigation bar content -->
    </nav>

0 个答案:

没有答案