共享样式表在不同视图中明显改变导航尺寸，但在开发人员工具(chrome)中显示相同的大小

Question

我不太确定我的标题是否传达了足够好的信息。基本上，我正在设计一个投资组合网站。我正在使用SCSS，并且在导航和页脚的各个页面上使用几乎相同的html。问题是，当我从Home视图切换到about me视图时，导航链接的字体大小和ul高度会有明显的差异。这也很明显，因为在导航图标下显示了额外的空间。然而，当我在开发工具中查看DOM样式时(如上所述，我主要是在开始设计阶段使用chrome)，它显示无论视图如何，大小都是相同的。我希望这是有意义的，如果需要额外的信息来解决这个问题，请告诉我。

nav {
  background: #00334f;
  /* Old browsers */ }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 60%;
    height: 60%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 3rem;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2rem; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }

<nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="aboutMe.html">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>

about me html:

nav {
  float: none;
  background: #00334f;
  /* Old browsers */
  line-height: 150%; }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 53%;
    height: 53%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 2.5em;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2em; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }

<body>
<nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="index.html">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>
  </body>

希望你能告诉，html是完全相同的，他们都使用相同的样式表。我不知道这是什么。请帮助!

Answer 1

您的原始帖子似乎没有任何更改-我指出的那些差异仍然存在。我只是在我的回答中编辑了它们，将它们标准化为53%的宽度/高度和3em的填充，并注意到在第一个代码片段中将导航行高度设置为150%。我把它注释掉了，现在它们是相同的。

老实说，我不确定为什么要为这些页面维护两套几乎相同的SCSS，如果html应该是相同的——您可以通过利用从sass生成的单个样式表为所有页面充当所有导航的处理，使其在整个站点中保持通用，从而使您的生活更轻松。

nav {
  background: #00334f;
  /* Old browsers */ }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 53%;
    height:53%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 3em;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2rem; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }

<nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="aboutMe.html">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>

nav {
  float: none;
  background: #00334f;
  /* Old browsers */
  /*line-height: 150%;*/ }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 53%;
    height: 53%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 3em;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2em; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }

<body>
<nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="index.html">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>
  </body>