Question

我刚刚开始构建一个cms，我甚至还没有到服务器端脚本但是我注意到我的html标签的一些东西每次我在html中声明doctype标签整个html和body标签总是在这里缩短是截图http://postimg.org/image/h3lj4ozzd/我已经检查了我的css和html是否有任何错误，但我找不到任何错误。我最初使用firefox运行我的页面，我甚至切换到chrome，但错误仍然出现。我甚至尝试在带有wamp的Windows系统上运行它（我使用的是linux）但是错误仍然存在。我已经尝试了所有可以放下的东西而且它们没有工作......请帮助我需要建议。谢谢

这是正常的文件 http://postimg.org/image/xcahm9bsj/

这是包含doctype的html文件

<!DOCTYPE html>
<html lang="en">

<head>
<title>Welcome to quick score</title>
<link rel = "stylesheet" href = "style.css" />
</head>

<body>

<div id = "top_bar"><p>Home</p></div>

<div id = "two">
<p>Database connection was succesful</p>

</div>

<div id = "one">

<ul>
<li><a href="#"><img src = "images/sidebar/dashboard.png" /> Dashboard</a></li>
<li><a href="#"><img src = "images/sidebar/attendance.png" /> Attendance sheet </a></li>
<li><a href="#"><img src = "images/sidebar/grades.png" /> Grades</a></li>
<li><a href="#"><img src = "images/sidebar/students.png" /> Students</a></li>
</ul>

</div>

</body>


</html>

这是我使用

的css文件

@charset "utf-8";
/* CSS Document */

body {
  margin: 0 auto;
  padding: 0;
  border: 3px solid #000000;
}

p {
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS";

}


a {
  text-decoration: none;
}

#top_bar {
  padding-top: 5px;
  background-image: url(images/back3.jpg);
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  height: 40px;
  width: 100%;
}


#one { background-image: url(images/back3.jpg);
  width: 15%;
  height: 100%;
  margin-top: -16px;
  color: #ffffff;

}

#one ul {
 list-style-type: none;
 padding: 0;
 height: 50%;
 padding-top: 20px;

}

#one ul li  {
padding-bottom: 2px;
text-align: left;
display: block;

}

#one ul li a {
  color: #ffffff;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 100%;
  display: block;
  font-family: "Comic Sans MS";
}


#one ul li a:hover {
        background-color: #ffffff;
}

#one ul li a img {
  margin-bottom: -10px;
}

.position {
  margin-top: 5px;
}

#one ul li a:hover {
  color: #000;
}

#one ul li:active{
text-decoration: none;
background-color: blue;
padding-left: 48px;
padding-right: 47px;
padding-bottom: 9px;
text-align: center;

}



#two {
  width: 81.5%;
  height: 200px;
  float: right;
  padding: 20px 0 0 20px;

}

.login {
  margin: 0 auto;
  padding: 10px;
  background-color: #999;

}

form ul li {
  padding-bottom: 5px;
  display: block;

}

#white {
  display: block;
  background-color: black;
  height: 40%;
  width: 50%;
}

.buttons {
  color: white;
  margin-left: 60px;
}

.register_buttons {
  color: white;
  margin-left: 70px;
}


input[type=submit] {
    border: 1px solid #f44c0e;
    color: #fff;
    background: tomato;
    padding: 10px 20px;
    border-radius: 3px;
}
input[type=submit]:hover {
    background: #f44c0e;
}

Answer 1

对于符合HTML5标准的浏览器以及遵循网络演变的好方法，请保留 doctype 。

您是否尝试过添加：

html, body{
   width:100%;
   height:100%;
}

此外，你应该摆脱borders，特别是body。否则添加：

*{box-sizing: border-box;}

标记导致奇怪的HTML行为

1 个答案: