Bootstrap導航欄品牌重量基於Safari中的下拉列表更改

非常令人沮喪的問題我找不出來。只有在Safari中注意到，當我觸發固定導航欄中的下拉菜單時，導航欄中所有文本的字體重量發生變化（包括品牌文本）。Bootstrap導航欄品牌重量基於Safari中的下拉列表更改

這裏是導航欄的屏幕拍攝前

和AFTER：

我已經包括了導航欄文本和自定義CSS的下方。謝謝你的幫助！

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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="/">Midge Raymond</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="hidden-sm"><a href="/">home</a></li> 
     <li><a href="/bio.html">bio</a></li> 
     <li class="dropdown"> 
      <a href="/books" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="500">books <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
          <li><a href="/books/mylastcontinent.html">My Last Continent</a></li> 
          <li><a href="/books/forgettingenglish.html">Forgetting English</a></li> 
          <li><a href="/books/everydaywriting.html">Everyday Writing</a></li> 
          <li><a href="/books/everydaybookmarketing.html">Everyday Book Marketing</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="/books" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="500">other writing <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
          <li><a href="/otherwriting/articles.html">Articles</a></li> 
          <li><a href="/otherwriting/shortstories.html">Short Stories</a></li> 
      </ul> 
     </li> 

     <li><a href="/news.html">news & events</a></li> 
     <li class="hidden-sm"><a href="/blog">blog</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

和CSS：

.navbar { 
     min-height: 100px; 
     padding-top: 15px; 
     margin-bottom: 5px; 
     padding-left: 0px; 
} 

.navbar-toggle { 
     margin-top: 40px; 

} 

.navbar-brand { 
     font-family: 'EB Garamond', 'Garamond', serif; 
     font-size: 52px; 
     margin-top: 15px; 
     margin-bottom: 10px; 
     text-align: center; 
     font-weight: normal; 
} 

@media (max-width: 768px) { 
    .navbar-brand { 
     font-family: 'EB Garamond', 'Garamond', serif; 
     font-size: 34px; 
    } 
    .navbar-toggle { 
    margin-top: 15px; // Adjust toggle position 
    } 
    body { padding-top: 110px; } 

} 


.navbar-default .navbar-brand { 
      color: #ffffff; 
      font-weight: normal; 
} 

.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #488A87; 
    background-color: transparent; 
} 

.navbar-default { 
     background-color: #073949; 
     border-color: #aaaaaa; 
} 

.navbar-default .navbar-nav > li > a { 
     color: white; 
     font-size: 17px; 
     padding-top: 10px; 
} 

.navbar-inverse .navbar-brand { 
    color: #ffffff; 
} 

.navbar-default .navbar-nav > li > a:hover { 
     background-color: #E5E5E5; 
} 

@media (min-width:1024px) { 
     .navbar > .container { 
      text-align: center; 
     } 
     .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li { 
      float: none; 
      display: inline-block; 
     } 
     .collapse.navbar-collapse { 
      float: none; 
      width: auto; 
      clear: none; 
      text-align: center; 
     } 
} 

.dropdown-menu { 
     background: #f9f9f5; 
}

來源

2015-12-22 John Y

您需要將以下內容添加到CSS文件中才能解決此問題。這是一個字體平滑問題，與position: fixed和Safari發生。

.navbar-fixed-top { 
    -webkit-font-smoothing: antialiased; 
}

你可以找到關於此修復程序的詳細信息，以及爲什麼它會出現here。

JSFiddle：https://jsfiddle.net/7njwmd1a/

來源

2015-12-22 21:36:24

謝謝詹姆斯！這個伎倆。 –

嘗試字體重量：正常重要;

用戶開發者工具（按F12）瀏覽器檢查哪些類正在被添加/刪除，當你點擊下拉，可能會有助於解決問題。

來源

2015-12-22 19:27:43 Anand

Thanks！這將是我的後備方法。幸運的是，字體平滑是問題所在。 –

Bootstrap導航欄品牌重量基於Safari中的下拉列表更改

回答

相關問題