非常令人沮丧的问题,我无法弄清楚.仅在Safari中注意到,当我在固定导航栏中触发下拉列表时,导航栏中所有文本的字体粗细都会发生变化,包括品牌文字.
这是导航栏的屏幕截图
之后:
<!-- 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',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; }