html 属性位置向上移动,CSS导致元素向上移动

我有一个很奇怪的问题，我不确定原因。我的网页上的元素并不坚持他们定义的位置，而是向上“跳跃”。CSS导致元素向上移动

我目前的布局看起来因此，随着HTML和CSS如下：

/* HTML reset */

html, * {

margin: 0px;

padding: 0px;

}

/* General styling */

body {

font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;

font-weight: normal;

font-size: 1em;

color: white;

background-color: black;

line-height: 20px;

letter-spacing: 1.5px;

}

/*Custom link styles*/

a:link {

color: white;

background-color: transparent;

text-decoration: none;

-webkit-transition: color .4s linear;

-moz-transition: color .4s linear;

-ms-transition: color .4s linear;

-o-transition: color .4s linear;

transition: color .4s linear;

}

a:visited {

color: white;

background-color: transparent;

text-decoration: none;

}

a:hover {

color: #b70000;

background-color: transparent;

text-decoration: underline;

}

.logo a:link {

text-decoration: none;

}

.logo a:hover {

color: #b70000;

background-color: transparent;

}

/* Header styling */

header {

margin-bottom: 20px;

}

header, footer {

height: 50px;

padding-left: 50px;

padding-right: 50px;

font-size: .75em;

clear: both;

}

header nav, .logo, footer nav {

float: left;

}

header nav, footer nav, #header_search, #copyright {

margin-top: 20px;

}

header li, footer li {

display: inline;

}

#header_search {

width: 200px;

float: right;

clear: right;

}

#search input, #homesearch input {

padding: 0px 20px 0px 20px;

color: #d7d7d7;

background-color: #2d3035;

border: solid 4px #2a2e31;

}

#search input:focus, #homesearch input:focus {

outline: none;

background-color: white;

color: #6a6f75;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

}

#search input {

width: 80%;

height: 25px;

font-size: 1.5em;

border-radius:15px;

-moz-border-radius:15px;

-webkit-border-radius:15px;

}

/* Logo styling */

.logo {

font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;

font-size: 3em;

width: 200px;

margin-right: 10px;

clear: left;

border: solid 1px red;

}

/* Content wrapper */

#content {

width: 90%;

max-width: 1500px;

margin: auto;

padding: 30px 15px 30px 15px;

clear: both;

overflow: auto;

background-color: rgba(203,203,203,0.2);

background-image: url(assets/images/bkg.png);

background-repeat: repeat;

}

/* Homepage */

#home_banner {

padding-top: 50px;

font-weight: normal;

text-align: center;

border: solid 1px red;

}

#home_banner h1 {

font-size: 5em;

clear: both;

border: solid 1px blue;

}

#home_banner h2, #search input, #homesearch input, #searchresults, #details .title {

font-family: 'RobotoThRegular', Verdana, Helvetica, Arial, sans-serif;

font-weight: normal;

}

#home_banner h2 {

font-size: 1.8em;

clear: both;

border: solid 1px yellow;

}

#homesearch {

width: 480px;

margin: 80px auto 70px auto;

clear: both;

}

#homesearch input {

width: 90%;

font-size: 2em;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

}

我已经添加边框的每个元素

HTML

Screening - Your movie database | Discover. Watch. Share.

Screening

• Home

Discover. Watch. Share.

Screening. Your movie database.

Screening

• Home |
• About |
• Privacy Policy

©Screening 2012