我使用 HTML 和 CSS 构建了一个导航栏，它的功能几乎完美。 The issue is that when either of the two gallery pages is selected, the positioning of the navigation bar moves slightly upward.我不确定问题出在哪里(这似乎很具体，因为我在这里和 Google 上都找不到任何类似的问题)。
注意:图库 HTML 页面有专门写入的 CSS 内容，因为如果使用 PHP 的包含语句(与其他页面一样)包含此内容，图库幻灯片图像会由于某种原因而变形/拉伸(stretch)。无论哪种方式，导航栏问题都存在。
服务页面(非画廊寻呼机)的 HTML:
<?PHP
//if browser is IE, displays IE specific navbar
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
{include('navbarIE.php');}
//if browser is anything else, include original navbar file
else
include('navbar.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Daiko Construction Remodeling</title>
<style type="text/css">
div#wrapper {
position: relative;
margin-left: 0px;
margin-right: 0px;
top: 20px;
width: 866px;
}
</style>
</head>
<body>
<br/>
<div id="wrapper">
<p>For your conveniece, we have listed just a few of the projects that we most commonly undertake.
If there is a specific service that you require and it is not listed below,
please <a style="color: white;" href="contactus.php">contact us</a> for more information. Additionally,
we offer FREE estimates for our services. While larger projects may require us to do an on-site
evaluation and no two projects are exactly alike, we request that you send us a short email with
an inquiry or any question you might have.
<br><br>
</span>
<ul>
<li>Window and door installation (European and Domestic)</li>
<li>General and central HVAC, A/C, heating</li>
<li>Remodelling of:</li>
<ul>
<li>kitchens</li>
<li>bathrooms</li>
<li>bedrooms</li>
<li>basements</li>
<li>etc.</li>
</ul>
<li>Flooring (wood and tile)</li>
<li>House additions</li>
<li>Lighting and electrical work</li>
<li>Plumbing<br></li>
<li>Regular handyman work</li>
<li>And many others</li>
</ul>
<br>
</div>
</div>
</div>
<?PHP include('footer.php'); ?>
</body>
</html>
图库页面的 HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Gallery</title>
<link rel="stylesheet" href='jsddm.css'>
<img src="./styles/icons/kitchen2.jpg" class="image" />
<style type="text/css">
div#wrapper {
position:relative;
margin-left:0px;
margin-right:0px;
top: 14px;
width: 866px;
}
/*
//css to adjust properties of IE navigation bar and all text
*/
ul.jsddm, ul.flyout {
margin: 0;
padding: 0;
line-height: 2.0em;
list-style-type:none;
}
ul.jsddm li {
float: left;
width: 20%;
position:relative;
}
ul.jsddm a {
color: #000000;
background-color: #F5DEB3;
border: 1px solid #444;
display: block;
text-decoration: none;
text-align: center;
width: auto;
}
ul.flyout li {
width: 100%;
display:block;
float:none;
}
ul.jsddm a:hover {
color: #000;
background-color: #FFF;
}
ul.flyout {
display:none;
position:absolute;
top:38px;
left:0px;
width:100%;
}
ul.jsddm li:hover ul.flyout {
display:block;
}
</style>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<link rel="shortcut icon" href="./styles/icons/daikofavicon.ico" />
<body background="./styles/icons/background4.jpg">
<body style="background-image:url(./styles/icons/background4.jpg)">
<!--
//navigation bar menu set up
-->
<body>
<div id="wrapper">
<ul class="jsddm">
<li><a href="index">HOME</a></li>
<li><a href="services">SERVICES</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="window">WINDOWS</a></li>
<li><a href="contactus">CONTACT US</a></li>
</ul>
</div>
<br/>
<br/>
<div id="wrapper">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/img_1214.jpg" alt="Living and Dining Rooms" title="Living and Dining Rooms" id="wows1_0"/></li>
<li><img src="data1/images/100_2885.jpg" alt="100_2885" title="100_2885" id="wows1_1"/></li>
<li><img src="data1/images/img_3676.jpg" alt="Kitchen" title="Kitchen" id="wows1_2"/></li>
<li><img src="data1/images/img_3698.jpg" alt="Living Room" title="Living Room" id="wows1_3"/></li>
<li><img src="data1/images/100_2891.jpg" alt="100_2891" title="100_2891" id="wows1_4"/></li>
<li><img src="data1/images/dsc05866.jpg" alt="Living Room" title="Living Room" id="wows1_5"/></li>
<li><img src="data1/images/100_2888.jpg" alt="100_2888" title="100_2888" id="wows1_6"/></li>
<li><img src="data1/images/img_1224.jpg" alt="Basement" title="Basement" id="wows1_7"/></li>
<li><img src="data1/images/img_1246.jpg" alt="Bathroom" title="Bathroom" id="wows1_8"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="Living and Dining Rooms"><img src="data1/tooltips/img_1214.jpg" alt="Living and Dining Rooms"/>1</a>
<a href="#" title="100_2885"><img src="data1/tooltips/100_2885.jpg" alt="100_2885"/>2</a>
<a href="#" title="Kitchen"><img src="data1/tooltips/img_3676.jpg" alt="Kitchen"/>3</a>
<a href="#" title="Living Room"><img src="data1/tooltips/img_3698.jpg" alt="Living Room"/>4</a>
<a href="#" title="100_2891"><img src="data1/tooltips/100_2891.jpg" alt="100_2891"/>5</a>
<a href="#" title="Living Room"><img src="data1/tooltips/dsc05866.jpg" alt="Living Room"/>6</a>
<a href="#" title="100_2888"><img src="data1/tooltips/100_2888.jpg" alt="100_2888"/>7</a>
<a href="#" title="Basement"><img src="data1/tooltips/img_1224.jpg" alt="Basement"/>8</a>
<a href="#" title="Bathroom"><img src="data1/tooltips/img_1246.jpg" alt="Bathroom"/>9</a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com">jQuery Slideshow</a> by WOWSlider.com v4.0</span>
<div class="ws_shadow">
</div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<?PHP include('footer.php'); ?>
</body>
</html>
CSS:
body {
font-family: "Vijaya", "Andalus", Serif;
font-size: 20px;
color: white;
width: 866px;
margin: auto;
align: center;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
ul.jsddm {
margin: 0;
padding: 0;
position: relative;
line-height: 2.0em;
}
ul.jsddm a {
color: #000000;
background-color: #F5DEB3;
border: 1px solid #444;
display: block;
text-decoration: none;
text-align: center;
width: auto;
height: 32px;
}
ul.jsddm a:hover {
color: #000;
background-color: #FFF;
height: 32px;
}
ul.jsddm > li {
position: relative;
float: left;
list-style: none;
width: 20%;
}
为了代码重用而包含在大多数页面中的导航栏 HTML 文件:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<link rel="stylesheet" href='jsddm.css'>
<img src="./styles/icons/kitchen2.jpg" class="image" />
</head>
<body background="./styles/icons/background4.jpg">
<body style="background-image:url(./styles/icons/background4.jpg)">
</body>
<!--
//include favicon for site
-->
<link rel="shortcut icon" href="./styles/icons/daikofavicon.ico" />
<!--
//jQuery to make navigation bar work and drop down
-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("ul.jsddm li").hover(function(){
$('ul:first',this).css('visibility', 'visible');
}, function(){
$('ul:first',this).css('visibility', 'hidden');
});
});
</script>
<!--
//navigation bar menu set up referenced by css file jsddm
-->
<body>
<div id="wrapper">
<ul class="jsddm">
<li><a href="index">HOME</a>
<li><a href="services">SERVICES</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="window">WINDOWS</a></li>
<li><a href="contactus">CONTACT US</a></li>
</ul>
</div>
<br/>
</body>
</html>
最佳答案
导航栏的包装器在您的图库页面上具有不同的样式。
在其他页面上，您设置了 top: 20px;。在图库页面上，您设置了 top: 14px;。
只需在所有页面上使用一个外部样式表来处理导航栏之类的内容。如有必要，您可以在各个样式表中详细了解每个页面，但这样可以避免“主”元素中的不一致。
关于html - 不需要的导航栏大小调整问题(CSS 和 HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17970895/