当我将鼠标悬停在导航栏上时字体变薄了

Question

这就是我不会悬停的样子（就像我希望它总是看起来一样）：

它看起来很瘦：

我设置了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 | idontknow@gmail.com</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>

Answer 1

就您的问题而言，它没有任何问题，导航栏中的font在设置为position:fixed时不会变薄，如下面的代码段所示。在我看来，这是一种视错觉，因为font-size和font-weight在hover /不是hover时是相同的，但颜色会发生变化，而border变大width:97.5%创建揭示效果。

OP提供的评论

  

@dippas我很想知道你是如何得到滚动条的！

从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; }

＆＃13;

＆＃13;

<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 | idontknow@gmail.com</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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;