Question

我有一个非常奇怪的问题，我不确定原因。我页面上的元素并没有坚持到他们定义的位置，而是向上“跳跃”。

我的当前布局看起来如此，下面是HTML和CSS： Current layout

HTML

<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Screening - Your movie database | Discover. Watch. Share.</title>
    <meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
    <meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <link rel="stylesheet" href="fonts.css" type="text/css" />

</head>

<body>

    <header>

<p class="logo"><a href="index.php" id="logo">Screening</a></p>

<nav>

    <ul>
        <li><a href="index.php" title="Home">Home</a></li>      
    </ul>

</nav>

<section id="header_search">

    <form id="search" action="search.php" method="get">
        <input type="text" title="name" name="title" placeholder="search for a movie">
    </form>

</section>

</header>   
    <div id="content">

        <div id="home_banner">
            <h1>Discover. Watch. Share.</h1>
            <h2>Screening. Your movie database.</h2>
        </div>

        <form id="homesearch" action="search.php" method="get">
            <input type="text" title="name" name="title" placeholder="search for a movie">
        </form>

    </div>

    <footer>

<p class="logo"><a href="index.php" id="logo">Screening</a></p>

<nav>

    <ul>
        <li><a href="index.php" title="Home">Home</a> | </li>
        <li><a href="about.php" title="About">About</a> | </li>
        <li><a href="privacy.php" title="Privacy Policy">Privacy Policy</a></li>            
    </ul>

</nav>

<p id="copyright">©Screening 2012</p>

</footer>   
</body>

</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); 
}

为了清晰起见，我为每个遇到问题的元素添加了边框。我原本正确地布置了所有东西，不过有些东西在某个地方翘起来，我不能为我的生活弄清楚;几个星期以来，我一直在努力奋斗！我很确定这是一个小而简单的东西，但解决方案完全避开了我。

显然，预期的结果应该如下所示（忽略搜索栏的显示，这是在修改搜索栏之前的早期模型）： Intended result

Answer 1

只需杀死身体的固定线高：line-height：20px; ＆lt; - 摆脱它。

Answer 2

您已将line-height上的<body>设置为20px。没有line-height的任何元素（例如，您的<h1>和<h2>）将继承此行高度大小，即使它们的字体大小要大得多。

通常最好设置相对于字体大小的线高，即不要在其上指定像素单位。

body {
    ...
    font-size: 1em;
    line-height: 1.25;/* This makes 20px the base line height, but it’ll get bigger for lines with a bigger font size */

http://jsfiddle.net/8ZBzt/

CSS导致元素向上移动

2 个答案: