Question

我正在尝试将图像定位在页面顶部并伸展到页面的两侧，高度为51px。但是，图像与页面顶部和页面两侧之间存在间隙。请你告诉我我做错了什么？

#background {
width: 100%; 
height: 100%; 
position: absolute; 
left: 0px; 
top: 0px; 
z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}
#twitter {
    background: url(http://maxk.me/test/img/twitterbg.png) repeat;
    height: 51px;
    width: 100%;
    position: fixed;
}

HTML

<html>
    <head>
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="background">
            <img src="...." class="stretch" alt="" />
        </div>
        <div id="twitter">

        </div>
       </body>
</html>

Answer 1

您需要删除margin上的默认body：

html, body {
    margin: 0;
    padding: 0
}

您还应该添加一个有效的doctype作为第一行：

<!DOCTYPE html>

如果没有这个，您的页面将在Internet Explorer中为very broken，并且通常在不同浏览器之间不一致。

页面顶部的图像边框之间的间隙html

1 个答案: