嗨,伙计们,我一直在工作的一个网站正在运行,并且随机地在顶部栏上重新定位自己,我不知道为什么。我以前以为一切都很好,但是最近我看到了该网站,碰巧在导航栏和窗口 url 之间的页面顶部有一个奇怪的空间。有人可以检查它并帮助我找出导致这种情况的原因以及是否有快速或简单的解决方案。该网站 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>
body
标签后面" "
一行。删除它,这应该会正确重新定位导航栏。
我刚刚意识到,只有在开发工具中"检查元素"才能看到这一点。
如果可以编辑页面的源代码,请确保<nav class="top-bar" data-topbar>
紧跟在<body>
之后。现在,有一个空行(第 16 行)。
解决这个问题试试这个
body{
font-size: 0;
}