私が理解できない非常に苛立たしい問題。Safariで、固定ナビゲーションバーでドロップダウンをトリガーすると、ブランドテキストを含むナビゲーションバーのすべてのテキストのフォントの太さが変わることに気づきました。
これが前のナビゲーションバーのスクリーンショットです
以降:
ナビゲーションバーのテキストとカスタム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;
}
この問題を修正するには、CSSファイルに以下を追加する必要があります。これはposition: fixed
、Safariで発生するフォントスムージングの問題です。
.navbar-fixed-top {
-webkit-font-smoothing: antialiased;
}
この修正に関する詳細と、それが発生する理由については、こちらをご覧ください。
JSFiddle:https://jsfiddle.net/7njwmd1a/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加