在我的网站上,一个特定页面的徽标被向下轻推了几个像素,而在所有其他页面上却没有。所有页面的代码都是相同的(至少我认为是),所以我不确定是什么导致了问题。
这是工作与非工作的屏幕截图:
在职的:
非工作:
两者的代码如下所示,但是由于某种原因,其中一个页面无法正确呈现
<body>
<div class="wrapper"><?php include("include/header.php"); ?>
header.php:
<header id="header">
<div id="logo">
<h1 class="hidden">Welcome</h1>
</div><!-- #logo -->
<?php include("getstageinfo.php");
switch ($currentStage)
{
case "0":
$home ="period0.php";
break;
case "1":
$home ="period1.php" ;
break;
case "2":
$home ="period2.php" ;
break;
case "3":
$home = "period3.php";
break;
}
?>
<nav id="nav">
<h1 class="hidden">Main Navigation</h1>
<a class="nav-item current" href="<?php echo $home ?>">HOME</a>
<a class="nav-item" href="news.php">NEWS</a>
<a class="nav-item" href="accounts.php">ACCOUNTS</a>
<a class="nav-item" href="logout.php">LOG OUT</a>
<div id="nav_edge"> </div><!-- #nav_edge -->
</nav><!-- #nav -->
</header><!-- #header -->
CSS:
body { background-color: #031311; margin: 0px; padding: 0px; width: 100%; position: relative; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center top; overflow-x:hidden; font-size: 14px; line-height: 1.6em; color: #2a2d32; }
#header { margin: 0px; padding: 0px; width: 100%; height: 350px; display: block; position: relative; overflow: hidden; }
#header #logo { background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: center top; display: block; margin: 0px; padding: 0px; height: 450px; width: 100%; }
#header #nav { position: absolute; height: 50px; width: 455px; left: 50px; top: 298px; background-image: url(../images/nav_bg.png); background-repeat: repeat; background-position: left top; margin: 0px; padding: 0px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #8C9791; border-bottom-color: #8C9791; border-left-color: #8C9791; }
#header #nav .nav-item { font-size: 14px; line-height: 50px; color: #E1E7EA; display: inline-block; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 15px; font-style: italic; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 15px; text-shadow: 1px 1px 1px #000; }
#header #nav #nav_edge { background-image: url(../images/nav_edge.png); background-repeat: no-repeat; background-position: left top; display: block; margin: 0px; padding: 0px; height: 52px; width: 40px; position: absolute; top: -1px; right: -40px; }
#header #nav .nav-item:hover, #header #nav .nav-item:focus { color: #FFF; }
#header #nav .nav-item.current { color: #2BD5CC !important; }
这是生成的用于工作的html:
这是不工作的: