奇怪的定位顶杆 zurb foundation 5

Question

大家好，我一直在做的一个网站出现了问题，并且随机地将自己奇怪地重新定位在顶部栏上，我不知道为什么。以前我以为一切都很好，但是最近我看到了这个网站，碰巧在页面顶部的导航栏和 window url 之间有一个奇怪的 space。有人可以检查它并帮助我找出造成这种情况的原因以及是否有快速或简单的修复方法。该站点是 www.omegadesignla.com 如有任何帮助，我们将不胜感激。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Omega Design | LA</title>
    <meta name="description" content="Web development and printing services serving the greater los angeles area">
      <meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
    <link rel="stylesheet" href="stylesheets/app.css" />
    <link rel="stylesheet" href="stylesheets/foundation-icons.css" />
    <link rel="stylesheet" href="css/normalize.css" />
  </head>
  <body>
    <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">
              <span><a href="index.html"><img class="logo" src="img/logofinal.png"></a><span>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>
          <section class="top-bar-section">
            <ul class="right">
              <li><a href="#about">About us</a></li>
              <li><a href="#" data-reveal-id="myModal">Contact us</a></li>
                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="services.html#printing">Print Media</a></li>
                    <li><a href="services.html">Web Development</a></li>
                   <!--  <li><a href="services.html">Promotional Items</a></li> -->
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    
  <div class="container">
    <header>

Answer 1

body 标记后有一行 "   "。删除它，这应该正确地重新定位导航栏。

我刚刚意识到只有在开发工具中 'inspect element' 才能看到这个。

如果您可以编辑页面的源代码，请确保 <nav class="top-bar" data-topbar> 紧跟在 <body> 之后。现在，有一个空行（第 16 行）。

Answer 2

解决这个问题试试这个

body{
   font-size: 0;
}

奇怪的定位顶杆 zurb foundation 5

weird positioning top bar zurb foundation 5

html

css

zurb-foundation

zurb-foundation-5