我的网站包含所有页面，每个页面的布局都类似于： http://gyazo.com/401996f65b68b95b9a26d560a3f7699e
然而，有一个页面出现了glitched，它看起来像这样： http://gyazo.com/b35c576f57029a1872fe6420afff6060
我想知道是否有人可以帮我解决这个问题？
以下是代码：
该错误页面的HTML：
<head>
<title>CRAFT412 - Rules</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<!--HTML FOR ALL PAGES-->
<!--BODY SECTION-->
<body>
<!--WRAPPER SECTION-->
<div id="wrapper">
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<center>
<img src="images/CRAFT412 - Logo.png" width="500" height="100" />
</center>
</div>
<div id="ip">
<h4>SERVER IP: 82.31.216.149:25565</h4>
</div>
<div id="teamspeak_logo"> <a href="ts3server://82.31.216.149:9987">
<img src="images/CRAFT412 -Teamspeak logo.png" width="136" height="40"/></a>
</div>
</div>
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li><a href="index.html">HOME</a>
</li>
<li><a href="status.html">STATUS</a>
</li>
<li><a href="info.html">INFO</a>
</li>
<li><a href="#">GAMEMODES</a>
<ul>
<li><a href="gamemodessurvival.html">SURVIVAL</a>
</li>
<li><a href="#">PURE-PVP</a>
</li>
<li><a href="#">GAMESWORLD</a>
</li>
</ul>
</li>
<li><a href="rules.html">RULES</a>
</li>
<li><a href="vote.html">VOTE</a>
</li>
</ul>
</div>
<!--RULES CONTENT-->
<h3>RULES</h3>
<h3><br>GLOBAL RULES</h3>
<p>Global rules follow across the entire server</p>
<p>All players are expected to comply to all of the listed rules or they will be muted, kicked, timed out or banned</p>
<h4>Rule listing:</h4>
<li>No griefing
<li>No flying. (Unless you've been given a high enough rank)
<li>No unauthorized mod usage
<li>No hacked clients
<li>No cheating
<li>Show all other players respect. Including staff
<li>No begging for rank
<p>All rules are enforced by staff in a strict manner</p>
<h4>Punishments can include:</h4>
<li>Privilages taken away
<li>Mutes
<li>Prison (Survival)
<li>Temporary bans
<li>Permanent bans
<li>IP bans
<h3><br>SURVIVAL RULES</h3>
<h4>Rule listing:</h4>
<li>Global rules
<li>Don't build to close to other peoples creations, keep a reasonable distance
<li>No begging for materials
<!--HTML FOR ALL PAGES-->
<!--BOTTOM FOOTER SECTION-->
<div id="bottom_footer">
<div id="created_by">
<center>2014 © GR412</center>
</div>
<div id="social_media_youtube"> <a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40"/></a>
</div>
<div id="social_media_twitch"> <a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35"/></a>
</div>
<div id="social_media_twitter"> <a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55"/></a>
</div>
<div id="social_media_facebook"> <a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40"/></a>
</div>
</div>
</div>
</body>
所有网页的CSS：
/*CSS FOR ALL PAGES*/
/*ID SELECTIONS SECTION*/
/*BODY/WRAPPER SECTION*/
body {
background-color:black;
}
#wrapper {
width: 900px;
margin: 0px auto;
background-color: #e2e2e2;
}
/*TOP BANNER SECTION*/
#banner {
background-color:black;
}
#logo {
padding-top:27px;
margin :-27px;
}
#ip {
color:white;
float:right;
}
/*TOP NAV BAR SECTION*/
#nav_bar {
background-color: #a22b2f;
padding:1px;
box-shadow: 0px 2px 10px;
height:45px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
text-decoration:none;
font-weight:bold;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:12px;
padding-top:16px;
padding-left:10px;
padding-right:10px;
}
#nav_bar>ul>li>ul>li>a:hover {
background:#c9c9c9;
padding-bottom:2px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: #e2e2e2;
padding-top:1px;
padding-bottom:1px;
padding-left:0px;
padding-right:5px;
border: 1px solid black;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
font-size:14px;
font-weight:normal;
margin-left:-15px;
}
/*BOTTOM FOOTER SECTION*/
#bottom_footer {
width:100%;
height:50px;
background-color:#e2e2e2;
margin-top:40px;
border-top:solid 10px black;
border-bottom:solid 3px black;
}
#created_by {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin:17px;
}
#social_media_youtube {
float:left;
margin:-47px;
margin-left:275px;
}
#social_media_twitch {
float:left;
margin:-44px;
margin-left:335px;
}
#social_media_twitter {
float:right;
margin:-53px;
margin-right:320px;
}
#social_media_facebook {
float:right;
margin:-47px;
margin-right:280px;
}
/*ELEMENT SELECTIONS SECTION*/
p {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
margin-right:20px;
}
li {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
}
/*CSS FOR SPECIFIC PAGES*/
/*CLASS SELECTIONS SECTION*/
/*VOTE PAGE*/
.vote_button {
margin-left:20px;
}
/*STATUS PAGE*/
.status {
margin:20px;
}
/*INFO PAGE*/
.gallery_thumbnails img {
height: 60px;
width: 106px;
padding: 1px;
}
.gallery_thumbnails img:hover {
border: 3px solid #a22b2f;
cursor: pointer;
}
.gallery_preview img {
padding: 1px;
}
.gallery_thumbnails {
position: relative;
}
.imagebox {
display: inline;
}
.text {
display:none;
position: absolute;
left:140px;
top: -30px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:white;
font-weight:bold;
}
.imagebox img:hover + .text {
display: block;
}
/*SPECIFIC PAGES ID SELECTIONS SECTION*/
/*INDEX/GAMEMODE PAGES*/
#banner_image {
padding-top:30px;
}
答案 0 :(得分：0)
您的代码非常混乱，需要进行相当多的清理工作。你有整个地方没有关闭的列表标签，你把它们嵌套在div中，它们必须嵌套在ul标签中（你的部分html中有正确的），你的换行标签需要自我关闭（添加a /之后的br）...
<ul> <!--You need the ul tags around your li tags... -->
<li>List Item 1</li> <!-- Close the tags... -->
<li>List Item 2</li>
<li>List Etc...</li>
</ul> <br /> <!-- Proper BR tags are self-closing
没有看到任何其他看似不合适的东西，但有这么多开放标签，如果不首先修复它们就很难说清楚。