这就是我不盘旋时的样子（就像我希望它总是这样）：
这就是它看起来瘦的原因：
我有一个header和navbar设置，但当我试图使navbar在顶部fixed时，我得到了这种奇怪的效果。
标题、地址和导航栏中的字体由于某种原因都变薄了，我搞不懂。
代码如下：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 12em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 1em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav ul li a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: cursive;
padding: 8px 0;
display: block;
width: 97.5%;
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
text-decoration: none;
color: #0000EE;
}
nav ul li a:hover,
nav ul li a:active {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}<div id="header">
<div id="logo">Bonlee Grown Farm</div>
<div id="address">650 Al Davis Road
<br>
<p style="font-size: 0.1em">
<br>
</p>Bear Creek, NC 27514
<p style="font-size: 0.1em">
<br>
</p>(012)345-6789 | [email protected]</div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a>
</li>
<li> <a href="OurStory.html"> Our Story </a>
</li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a>
</li>
<li> <a href="Market2.html"> Market2 </a>
</li>
<li> <a href="Market3.html"> Market3 </a>
</li>
<li> <a href="Market4.html"> Market4 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurFarm.html"> From Our Farm </a>
<ul>
<li> <a href="Plant1.html"> Plant1 </a>
</li>
<li> <a href="Plant2.html"> Plant2 </a>
</li>
<li> <a href="Plant3.html"> Plant3 </a>
</li>
<li> <a href="Plant4.html"> Plant4 </a>
</li>
<li> <a href="Plant5.html"> Plant5 </a>
</li>
<li> <a href="Plant6.html"> Plant6 </a>
</li>
<li> <a href="Plant7.html"> Plant7 </a>
</li>
<li> <a href="Plant8.html"> Plant8 </a>
</li>
<li> <a href="Plant9.html"> Plant9 </a>
</li>
<li> <a href="Plant10.html"> Plant10 </a>
</li>
<li> <a href="Plant11.html"> Plant11 </a>
</li>
<li> <a href="Plant12.html"> Plant12 </a>
</li>
<li> <a href="Plant13.html"> Plant13 </a>
</li>
<li> <a href="Plant14.html"> Plant14 </a>
</li>
<li> <a href="Plant15.html"> Plant15 </a>
</li>
<li> <a href="Plant16.html"> Plant16 </a>
</li>
<li> <a href="Plant17.html"> Plant17 </a>
</li>
<li> <a href="Plant18.html"> Plant18 </a>
</li>
<li> <a href="Plant19.html"> Plant19 </a>
</li>
<li> <a href="Plant20.html"> Plant20 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jam1.html"> Jam1 </a>
</li>
<li> <a href="Jam2.html"> Jam2 </a>
</li>
<li> <a href="Jam3.html"> Jam3 </a>
</li>
<li> <a href="Jam4.html"> Jam4 </a>
</li>
<li> <a href="Jam5.html"> Jam5 </a>
</li>
<li> <a href="Jam6.html"> Jam6 </a>
</li>
<li> <a href="Jam7.html"> Jam7 </a>
</li>
<li> <a href="Jam8.html"> Jam8 </a>
</li>
<li> <a href="Jam9.html"> Jam9 </a>
</li>
<li> <a href="Jam10.html"> Jam10 </a>
</li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a>
</li>
</ul>
</nav>
</div>最佳答案
就您的问题而言，它没有什么问题，navbar中的font在设置为position:fixed时不会变薄，如您在下面的代码片段中所看到的。在我看来，这是一种错觉，因为font-size和font-weight在hover/不hover时是一样的，但颜色会改变，而那些大的border会产生显示效果。
来自OP的评论
@我想知道你是怎么得到滚动条的！
从width:97.5%中删除a
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 12em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 1em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 0 0.5%;
position: fixed
}
nav ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav ul li {
float: left;
width: calc(100% / 6);
}
/*FFEE2E*/
nav ul li a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: cursive;
padding: 8px 0;
display: block;
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
text-decoration: none;
color: #0000EE;
}
nav ul li a:hover,
nav ul li a:active {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}<div id="header">
<div id="logo">Bonlee Grown Farm</div>
<div id="address">650 Al Davis Road
<br>
<p style="font-size: 0.1em">
<br>
</p>Bear Creek, NC 27514
<p style="font-size: 0.1em">
<br>
</p>(012)345-6789 | [email protected]</div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a>
</li>
<li> <a href="OurStory.html"> Our Story </a>
</li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a>
</li>
<li> <a href="Market2.html"> Market2 </a>
</li>
<li> <a href="Market3.html"> Market3 </a>
</li>
<li> <a href="Market4.html"> Market4 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurFarm.html"> From Our Farm </a>
<ul>
<li> <a href="Plant1.html"> Plant1 </a>
</li>
<li> <a href="Plant2.html"> Plant2 </a>
</li>
<li> <a href="Plant3.html"> Plant3 </a>
</li>
<li> <a href="Plant4.html"> Plant4 </a>
</li>
<li> <a href="Plant5.html"> Plant5 </a>
</li>
<li> <a href="Plant6.html"> Plant6 </a>
</li>
<li> <a href="Plant7.html"> Plant7 </a>
</li>
<li> <a href="Plant8.html"> Plant8 </a>
</li>
<li> <a href="Plant9.html"> Plant9 </a>
</li>
<li> <a href="Plant10.html"> Plant10 </a>
</li>
<li> <a href="Plant11.html"> Plant11 </a>
</li>
<li> <a href="Plant12.html"> Plant12 </a>
</li>
<li> <a href="Plant13.html"> Plant13 </a>
</li>
<li> <a href="Plant14.html"> Plant14 </a>
</li>
<li> <a href="Plant15.html"> Plant15 </a>
</li>
<li> <a href="Plant16.html"> Plant16 </a>
</li>
<li> <a href="Plant17.html"> Plant17 </a>
</li>
<li> <a href="Plant18.html"> Plant18 </a>
</li>
<li> <a href="Plant19.html"> Plant19 </a>
</li>
<li> <a href="Plant20.html"> Plant20 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jam1.html"> Jam1 </a>
</li>
<li> <a href="Jam2.html"> Jam2 </a>
</li>
<li> <a href="Jam3.html"> Jam3 </a>
</li>
<li> <a href="Jam4.html"> Jam4 </a>
</li>
<li> <a href="Jam5.html"> Jam5 </a>
</li>
<li> <a href="Jam6.html"> Jam6 </a>
</li>
<li> <a href="Jam7.html"> Jam7 </a>
</li>
<li> <a href="Jam8.html"> Jam8 </a>
</li>
<li> <a href="Jam9.html"> Jam9 </a>
</li>
<li> <a href="Jam10.html"> Jam10 </a>
</li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a>
</li>
</ul>
</nav>
</div>关于html - 当我将鼠标悬停在导航栏上时，字体变薄，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37737124/